How to add row number to kendo ui grid?

Question

I have a kendo ui grid in my page that has some columns. Now I want to add a column to it that shows me row number. How to I do this? Thanks.

Answer 1

Based on Ehsan Mirsaeedi's great answer, I came up with this version, which assigns indices starting at 0 instead of row numbers starting at 1, skips group headers if the grid is grouped, and handles the case when the grid is not paged.

I needed these indices in order to add a template with a hidden input to each column, so that I can then submit the grid's values along with the entire form.

I think it's related enough and worth adding to the thread...

Code:

var theGrid = $("#grid").data("kendoGrid");
var rows = this.items().filter(function (index, item) {
    return $(item).hasClass("k-grouping-row") == false;
});

$(rows).each(function () {
    var index = $(this).index();

    //prevent group header rows from incrementing index
    if (theGrid.dataSource.options.group != null && theGrid.dataSource.options.group.length > 0)
        index -= $(this).prevAll("#grid tr.k-grouping-row").length;

    //adjust indices for current page
    if (theGrid.options.pageable == true)
        index += theGrid.dataSource.pageSize() * (theGrid.dataSource.page() - 1);

    //add the value to the grid's data object
    theGrid.dataItem(this).rowNumber = index;

    //and update the grid's HTML
    var rowLabel = $(this).find(".row-number");
    $(rowLabel).html(index);
});

Result: