How Can I Have Row Number In Kendo UI Grid

Question

I have kendo grid in asp.net mvc and i use server wrapper.I want Additional column named "Row Number" that is simple counter (1,2,3,...). I want this counter never change by client sorting. Always first row be 1 second row be 2 ,... in column "RowNumber"

how can I do this in kendo grid ?

Solution 1

You can use the dataBound event:

$("#grid").kendoGrid({
    sortable: true,
    dataSource: [{
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    }],
    columns: [{
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: "<span class='row-number'></span>"
    }],
    dataBound: function () {
        var rows = this.items();
        $(rows).each(function () {
            var index = $(this).index() + 1;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

(demo)

Solution 2

Other answers are OK but they don't apply pagination effects. So I think better implementation would be:

var grid = $( "#grid" ).kendoGrid( {
    sortable: true,
    dataSource: [ {
        name: "Jane Doe",
        age: 30
    }, {
        name: "John Doe",
        age: 33
    } ],
    pageable: {
        refresh: false,
        pageSizes: true,
        pageSize: 10,
    },
    columns: [ {
        field: "name"
    }, {
        field: "age"
    }, {
        field: "rowNumber",
        title: "Row number",
        template: dataItem => grid.dataSource.indexOf(dataItem) + 1
    } ],
} ).data().kendoGrid;

Solution 3

I am using Angular and Kendo together and I set the index value like this (using Lodash):

dataBound : function () {
   _.each(this.items(), function (item, i) {
      var rowScope = angular.element(item).scope();
      rowScope.dataItem.index = i;
   });
}

Comments

[Jesse]

possible duplicate of How to add row number to kendo ui grid?

[Levi Fuller]

This is exactly what I was looking for and it works the exact same way for an Angular Kendo Grid implementation.

[Levi Fuller]

Just in case, the template: (dataItem) => {...} can only be used for ES6 browsers, you may need to do function(dataItem) { var ds = ... } for ES5.