I'm having troubles getting the kendo.binding working for a nested array. First level list rendering correct but second has some troubles.
Working fiddle
Html:
<script id="ul-template" type="text/x-kendo-template">
<h3>#=NAME#</h3>
<ul data-template="il-template" data-bind="source: ad">
</ul>
</script>
<script id="il-template" type="text/x-kendo-template">
<li> #=ATT_NAME#</li>
</script>
Javascript:
var model = {items: [
{ NAME: "Group 1", ID: 1, ad: [{ ATT_NAME: "Attribute 1" }, { ATT_NAME: "Attribute 2" }] },
{ NAME: "Group 2", ID: 2, ad: [{ ATT_NAME: "Attribute 3" }, { ATT_NAME: "Attribute 4" }] },
{ NAME: "Group 3", ID: 3, ad: [{ ATT_NAME: "Attribute 5" }, { ATT_NAME: "Attribute 6" }] },
{ NAME: "Group 4", ID: 3, ad: [{ ATT_NAME: "Attribute 7" }, { ATT_NAME: "Attribute 8" }] }]};
kendo.bind($('#view'), model);
Result:
<div id="view">
<div data-template="ul-template" data-bind="source: items">
<h3>Group 1</h3>
<ul data-template="il-template" data-bind="source: ad">
<li> Attribute 3</li>
<li> Attribute 4</li>
</ul>
<h3>Group 2</h3>
<ul data-template="il-template" data-bind="source: ad">
<li> Attribute 7</li>
<li> Attribute 8</li>
</ul>
<h3>Group 3</h3>
<ul data-template="il-template" data-bind="source: ad">
</ul>
<h3>Group 4</h3>
<ul data-template="il-template" data-bind="source: ad">
</ul>
</div>