Nested Templates

6 posts, 0 answers
  1. matthew
    matthew avatar
    1 posts
    Member since:
    Nov 2010

    Posted 15 Aug 2012 Link to this post

    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!
  2. Mark
    Mark avatar
    3 posts
    Member since:
    Dec 2011

    Posted 18 Aug 2012 Link to this post

    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>
  3. Kendo UI is VS 2017 Ready
  4. Matt
    Matt avatar
    1 posts
    Member since:
    Jul 2012

    Posted 06 Sep 2012 Link to this post

    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/
  5. Mark
    Mark avatar
    3 posts
    Member since:
    Dec 2011

    Posted 21 Sep 2012 Link to this post

    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.
  6. Matt
    Matt avatar
    1 posts
    Member since:
    Jul 2012

    Posted 22 Sep 2012 Link to this post

    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.
  7. David
    David avatar
    87 posts
    Member since:
    Jul 2010

    Posted 28 May 2013 Link to this post

    Matt, you rock!

    Thanks mate. Exactly what I was looking for. And jsFiddle unleashed the awesome!!!
Back to Top
Kendo UI is VS 2017 Ready