Template inside template?

2 posts, 0 answers
  1. myTeamWorks
    myTeamWorks avatar
    15 posts
    Member since:
    Jan 2013

    Posted 23 Jan 2013 Link to this post


    Is it possible to use a template inside another template?

    Something like this:
    <script type="text/x-kendo-template" id="tmpl-user">
    <script type="text/x-kendo-template" id="tmpl-1">
    Where '#tmpl-user#' is called with the user object passed to the template.

    Thanks for your help.
  2. Alexander Valchev
    Alexander Valchev avatar
    2697 posts

    Posted 25 Jan 2013 Link to this post

    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 id="user-template" type="text/x-kendo-template">
        <div style="color: red;">
            <span>#: name #</span>
            <span>#: age #</span>

    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.

    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!
Back to Top