KendoUI Recursive Template

Question

I cam trying to construct a ListView using KendoUI.

Because of this, I need to create a ClientTemplate.

But what I want to know is, after creating the ClientTemplate, how can I use that template inside itself.

In other words I want to create a Recursive Template if that makes sense.

This is what I have so far:

<script type="text/x-kendo-tmpl" id="template">
    <div class="submenu-item">
         #:Name#
    </div>
    <div class="submenu-children">
         # foreach (var child in ChildElements ) { #
             // In here I want to reuse this same template.
         #}#
    </div>
</script>

The idea behind this is so that I can create a ListView of elements and all its children. I would format the children to be tabbed in slightly.

Any help will me much appreciated.

Answer 1

You don't need to do a #foreach inside your template, just make a call to

#= kendo.render(kendo.template($("\\#template").html()), data.ChildElements) #

You may run into an error if the bottom-most child elements don't have a ChildElements property, in that case just add a

# if(data.ChildElements !== undefined && data.ChildElements.length > 0 ) { #
    #= kendo.render(kendo.template($("\\#template").html()), data.ChildElements) #
# } #

See somewhat working sample at http://jsbin.com/fagawo/1/edit?html,js,output