New to Kendo UI for jQuery? Download free 30-day trial

Add Numbers to the Grid Rows

Environment

Product Progress® Kendo UI® Grid for jQuery

Description

How can I implement row numbers in a Kendo UI Grid?

Solution

To achieve the desired scenario, use the page() and pageSize() methods of the Data Source.

  <div id="grid"></div>
    <script>
      var record = 0;

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata",
          transport: {
            read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
          },
          pageSize: 20

        },
        sortable: true,
        columns: [
          {
            title: "#",
            template: "#= ++record #",
            width: 50
          }, {
            field: "ContactName", title: "Contact Name"
          }, {
            field: "CompanyName",
            title: "Company Name"
          }, {
            field: "Country",
            width: 150
          }
        ],
        pageable: true,
        dataBinding: function() {
          record = (this.dataSource.page() -1) * this.dataSource.pageSize();
        }
      });
    </script>

See Also

In this article