Kendo grid, ko binding, and access to row index

Question

I have a ko viewmodel, which I bind to a KendoGrid, using knockout-kendo.js

I use rowTemplate, because I need some custom functionality in some columns (icon, links, etc)

I need to do some custom functionality based on rownumber.

When binding ko viewmodel directly, I can use foreach binding and in the row template I have the $index which gives me the current row number.

How can I get the same thing when the viewmodel is bound to a Kendo Grid?

Thank you

Currently there is no built in index functionality in the template. However you could use the jquery `index()` method... http://jsfiddle.net/F88Bf/ — nemesv, Dec 08 '13 at 19:25
... by adding the following attribute to inside the template: data-bind="css: $root.altRowClass(j$($element).closest('tr').index()) I have j$ because app uses mootools also and I have jquery redefined as j$. However, what element is actually the $element referring to? I see it is HTMLSpanElement — bzamfir, Dec 08 '13 at 20:33
The `$element` refers to the current element where you have the data-bind attribute: http://knockoutjs.com/documentation/binding-context.html so your `tr` you probably only need `data-bind="css: $root.altRowClass(j$($element).index())` — nemesv, Dec 08 '13 at 20:36

score 2 · Accepted Answer · answered Dec 08 '13 at 20:31

Currently there is no built in index functionality support in the Kendo-Knockout the templates (also there is no support for this in the native Kendo templates).

However you could use the jQuery's index() method in combination with the $element binding context poperty to get the current tr position inside the datagird (altough this does not work correctly if you using paging):

<div data-bind="kendoGrid: { data: items, rowTemplate: 'rowTmpl', 
                             useKOTemplates: true }"> </div>

<script id="rowTmpl" type="text/html">
    <tr>
        <td>
            Row index: 
                <span data-bind="text: $($element).closest('tr').index()"></span>
        </td>
    </tr>
</script>

Demo JSFiddle.

Kendo grid, ko binding, and access to row index

1 Answers1

Linked