Bind to cells in a table row from array

[Gary]

I am binding to a table using a template. The number of columns is dynamic. My data source row looks like this:

{ name: "text", flags: [ {status: true}, {status: false}, {status: false} ] }

The flags array length is the same for all rows. My desired output is something like this:

<tr>
    <td data-bind="html: name"></td>
    <td><input type="checkbox" data-bind="check: status" /></td>
    <td><input type="checkbox" data-bind="check: status" /></td>
    <td><input type="checkbox" data-bind="check: status" /></td>
</tr>

I have tried using a nested template to generate the <td> elements for each of the array items, but the problem is that this requires a containing element to apply against, as in the made up "xxx" element below:

<script id="row-template" type="text/x-kendo-template">
    <tr>
         <td data-bind="html: name"></td>
         <xxx data-template="flags-template" data-bind="source: flags"></xxx>
    </tr>
</script>
<script id="statuses-template" type="text/x-kendo-template">
    <td><input type="checkbox" data-bind="checked: status" /></td>
</script>

I've also tried flattening out the data source:

[ {name: "text"}, {status: true}, {status: false}, {status: false} ]

But with this approach, I can't find a way to render the first array item differently than the remaining.

Can you advise how this problem should be addressed?

Thanks,
Gary

[Alexander Valchev]

Hello Gary,

My suggestion is to try using a JavaScript look inside the template:

<script id="myTemplate" type="text/x-kendo-template">
    <tr>
        <td data-bind="html: name"></td>
        # for(var i = 0; i < flags.length; i++) { #
            #console.log(i);#
            <td><input type="checkbox" data-bind="checked: flags[#=i#].status" /></td>
        # } #
    </tr>
</script>

Here is a small example: http://jsbin.com/eteqib/2/edit
I hope this approach will fit in your requirements.

Regards,
Alexander Valchev
the Telerik team