# Add Numbers to the Grid Rows

## Environment

<table>
 <tr>
  <td>Product</td>
  <td>Progress® Kendo UI® Grid for jQuery</td>
 </tr>
</table>

## Description

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

## Solution

To achieve the desired scenario, use the [`page()`](https://www.telerik.com/kendo-jquery-ui/documentation/api/data/datasource/methods/page) and [`pageSize()`](https://www.telerik.com/kendo-jquery-ui/documentation/api/data/datasource/methods/pagesize) methods of the Data Source.

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

      $("#grid").kendoGrid({
        dataSource: {
          type: "odata-v4",
          transport: {
            read: "https://demos.telerik.com/service/v2/odata/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

* [JavaScript API Reference of the jQuery Data Grid](https://www.telerik.com/kendo-jquery-ui/documentation/api/ui/grid)
* [jQuery Data Grid Overview (Demo)](https://demos.telerik.com/kendo-ui/grid/index)
* [Data Grid Overview (Documentation)](https://www.telerik.com/kendo-jquery-ui/documentation/controls/grid/overview)
* [Product Page of the jQuery Data Grid](https://www.telerik.com/kendo-jquery-ui/data-grid-\(table\))