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

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();
  }
});

Answer 2

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("#");