This is a migrated thread and some comments may be shown as answers.

Nested Templates

7 Answers 1402 Views
Templates
This is a migrated thread and some comments may be shown as answers.
matthew
Top achievements
Rank 1
matthew asked on 15 Aug 2012, 10:58 AM
Hi, is it possible to have one template within another?
I've given an example below to show what I mean.  The example has a Customer data object that has a customer name and an array of notes.  Notes are used on other objects so I have defined a template for them, but I can't work out how to render it from within the customer template:


<script type="text/x-kendo-template" id="NotesTemplate">
<div>
  # for (var i = 0; i < data.length; i++) { #
        <div>
            <em>#= data[i].CreatedBy # on  #= data[i].CreatedOn # </em>
            <p>
            #= data[i].NoteText #
            </p>
        </div>
  # } #
</div>
</script>


<script type="text/x-kendo-template" id="CustomerTemplate">
<div>
    Customer name #: data.CustomerName #
   
     <div id="CustomerNotes"></div>
     
    # $("\#CustomerNotes").html(_notesTemplate(data.Notes)); #


</div>
</script>



then...
 _notesTemplate = kendo.template($("#NotesTemplate").html(), { useWithBlock: false });
_customerTemplate = kendo.template($("#CustomerTemplate").html(), { useWithBlock: false });


 $("#CustomerDetails").html(_customerTemplate(customerData));


Any help much appreciated!

7 Answers, 1 is accepted

Sort by
0
Mark
Top achievements
Rank 1
answered on 18 Aug 2012, 11:27 PM
I am also looking for a solution to a similar problem. If unable to do a template within a template for the Notes collection that Matthew has, is it possible to loop through the collection using Razor syntax within the template?

Maybe something similar to this?

<script type="text/x-kendo-tmpl" id="template">
        <div class="function">
            <h3>${Title}</h3>
            @{foreach(KeyValuePair<string,string> item in {KeyPairs}) 
                {
                	//magic happens here
                }   
             }    
        </div>
 </script>
0
Matt
Top achievements
Rank 1
answered on 06 Sep 2012, 10:17 AM
Yes, it is possible - I've just done something similar myself. Please see this jsFiddle demo for an example: http://jsfiddle.net/nukefusion/C3szT/7/
0
Mark
Top achievements
Rank 1
answered on 22 Sep 2012, 03:11 AM
What if your notes field was a collection? I can get the template to go that way it is the collection in the template I have the issue with.
0
Matt
Top achievements
Rank 1
answered on 22 Sep 2012, 07:21 AM
Hi Mark,

Apologies, my first reply only covered the OP's query. To render a child template for a collection you will need to use some in-line javascript in the template. You can do this within Kendo templates using the # symbol. Please see this jsFiddle demo where I have changed the notes field to be a collection.

Nested template for child collection

Hope that helps!
Matt.
0
David
Top achievements
Rank 1
answered on 28 May 2013, 09:30 AM
Matt, you rock!

Thanks mate. Exactly what I was looking for. And jsFiddle unleashed the awesome!!!
0
Douglas
Top achievements
Rank 1
answered on 14 Jan 2020, 07:12 PM

Trying to use your example. But, instead of getting the results of the function, the actual text displays, for example: #= renderBtntemplate(data) # 

Any idea why I'm just getting the text? Thanks!

(my nested template is named renderBtntemplate)

The 'parent' template is named "rowTmpl":

<script id="rowTmpl" type="text/x-kendo-template">

...<td><span>#= renderBtntemplate(data) # </span></td>...

 

function renderBtntemplate(data) {
return kendo.Template.compile($('#btntemplate').html())(data);
}

<script id="btntemplate" type="text/x-kendo-template"> <p>${buId}</p> </script>

0
Ivan Danchev
Telerik team
answered on 17 Jan 2020, 04:12 PM

Hello Douglas,

Here's a dojo example, which uses the code snippets you posted and the data in the nested templates is properly visualized: https://dojo.telerik.com/ELItAnIR

Could you modify the example accordingly so that it demonstrates the issue and link it back for further review?

Regards,
Ivan Danchev
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Templates
Asked by
matthew
Top achievements
Rank 1
Answers by
Mark
Top achievements
Rank 1
Matt
Top achievements
Rank 1
David
Top achievements
Rank 1
Douglas
Top achievements
Rank 1
Ivan Danchev
Telerik team
Share this question
or