Kendo nested arrays binding troubles

325 views Asked by At

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>

0

There are 0 answers