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

Template inside template?

1 Answer 1624 Views
ListView (Mobile)
This is a migrated thread and some comments may be shown as answers.
myTeamWorks
Top achievements
Rank 1
myTeamWorks asked on 23 Jan 2013, 03:00 PM
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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 25 Jan 2013, 12:02 PM
Hi Bastien,

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

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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
ListView (Mobile)
Asked by
myTeamWorks
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or