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.

Grid.cshtml

        @(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"))
            )
        )

script.js

    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

• ASP.NET Core Grid Documentation

• ASP.NET Core Grid Demos

• ASP.NET Core DataGrid Product Page

• Telerik UI for ASP.NET Core Video Onboarding Course (Free for trial users and license holders)

• Telerik UI for ASP.NET Core Forums

See Also

• Client-Side API Reference of the Grid for ASP.NET Core

• Adding Grid Row Numbers Telerik REPL for ASP.NET Core

• Server-Side API Reference of the Grid for ASP.NET Core

• Telerik UI for ASP.NET Core Breaking Changes

• Telerik UI for ASP.NET Core Knowledge Base