Nested Templates

[matthew]

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!

[Mark]

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>

[Matt]

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/

[Mark]

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.

[Matt]

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.

[David]

Matt, you rock!

Thanks mate. Exactly what I was looking for. And jsFiddle unleashed the awesome!!!

[Douglas]

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>

[Ivan Danchev]

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