Template inside template?

[myTeamWorks]

Hi,

Is it possible to use a template inside another template?

Something like this:

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

           <span>data.Name</span>

</script>

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

            <div>
          data.Title

       </div>

  

       #tmpl-user(data.User)#

</script>

Where '#tmpl-user#' is called with the user object passed to the template.

Thanks for your help.
Bastien

[Alexander Valchev]

Hi Bastien,

Generally speaking such scenario is possible. To get it working you have to use the following methods:

• kendo.template - to compile the template
• kendo.render - to render the template with the provided data
• the #= # template syntax that is used for rendering literal values (in your case html code)

Here is an example:

<script id="item-template" type="text/x-kendo-template">
    <div>#: foo #</div>
    #= kendo.render(kendo.template($("\\#user-template").html()), [user]) #
</script>

<script id="user-template" type="text/x-kendo-template">
    <div style="color: red;">
        <span>#: name #</span>
        <span>#: age #</span>
    </div>
</script>

Please have in mind:

• the # symbol of the selector must be escaped with double back slash (marked in red).
• as a second parameter kendo.render accepts array with data. If your data consists of a single object, please wrap it inside square brackets (marked in blue).
• the DataSource (respectively the ListView) does not support nested data

Here is an example: http://jsbin.com/uhobeg/2/edit

On a side note, I am not sure what is the purpose of using nested templates. If your aim is to display the User's name you may use standard dot notation syntax:

<span>#: data.Title #</span>
<span>#: data.User.Name #</span>

This way is much simpler.

I hope this will help.

Regards,
Alexander Valchev
the Telerik team