New to Telerik UI for ASP.NET Core? Download free 30-day trial

Adding Row Numbers to a Grid Column

Environment

Product Telerik UI for ASP.NET Core Grid
Progress Telerik UI for ASP.NET Core version Created with the 2022.2.621 version

Description

How can I implement row numbers in a Telerik UI for ASP.NET Core Grid?

Solution

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

        @(Html.Kendo().Grid<App.Models.OrderViewModel>()
            .Name("grid")
            .Columns(columns =>
            {
                columns.Template("#= getRecord() #");
                columns.Bound(p => p.OrderID).Filterable(false);
            })
            .Pageable()
            .Events(ev=>ev.DataBinding("onDataBinding"))
            .DataSource(dataSource => dataSource
                .Ajax()
                .PageSize(20)
                .Read(read => read.Action("Orders_Read", "Grid"))
            )
        )
    var record = 0;
    function getRecord() {
        record += 1;
        return record
    }
    function onDataBinding() {
        record = (this.dataSource.page() - 1) * this.dataSource.pageSize();
    }

To see a complete example of the aforementioned approach, refer to the following Telerik REPL example.

More ASP.NET Core Grid Resources

See Also

In this article