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

    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

  2. Alexander Valchev
    Admin
    Alexander Valchev avatar
    2131 posts
    Member since:
    Sep 2012

    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>
     
    <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!

Back to Top