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

For asp.net mvc wrapper you should use something like this:

@{
     var counter = 1;
}

@( Html.Kendo().Grid<Types>()
   .Name("grid")
   .Columns(columns =>
   {           
        // Define a template column with row counter
       columns.Template(@<text>@counter++</text>);    

       // Define a columns from your data set and set a column setting
       columns.Bound(type => type.id);    

       columns.Bound(type=> type.name).Title("Name");    
       // add more columns here          
   })
)

Answer 2

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:

Answer 3

there is no need to define any variables, you can get help from 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 
            + ($("#grid").data("kendoGrid").dataSource.pageSize() * ($("#grid").data("kendoGrid").dataSource.page() - 1));;
            var rowLabel = $(this).find(".row-number");
            $(rowLabel).html(index);
        });
    }
});

Answer 4

For Razor you also need to actually show the number also: (not enough point thingies to comment)

above the grid:

@{int counter = 1;}

inside column definitions:

columns.Template(@<text> 
        <span>@counter @{ counter++; }</span>
        </text>).Title("#");

Answer 5

YD1m's template did not work for me it treated the variable like a string. So I had to implement it like so:

columns.Template(@<text>@((long)counter++)</text>)

Answer 6

Initialize a variable and show it in column as template: "#= ++record #"

Working Demo

Here is code:

var record = 0;

$("#grid").kendoGrid({
  dataSource: {
    data: [{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" },{ foo: "foo" }, { foo: "foo" }, { foo : "foo1" }],
    pageSize: 10
  },
  sortable: true,
  columns: [ {
    title: " ",
    template: "#= ++record #",
    width: 30
  }, { field: "foo" }],
  pageable: true,
  dataBinding: function() {
    record = (this.dataSource.page() -1) * this.dataSource.pageSize();
  }
});