This is a migrated thread and some comments may be shown as answers.

Bind to cells in a table row from array

1 Answer 342 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Gary
Top achievements
Rank 1
Gary asked on 11 Feb 2013, 11:54 PM
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

1 Answer, 1 is accepted

Sort by
0
Alexander Valchev
Telerik team
answered on 13 Feb 2013, 04:06 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Tags
MVVM
Asked by
Gary
Top achievements
Rank 1
Answers by
Alexander Valchev
Telerik team
Share this question
or