Adding Row Numbers to a Grid Column
Environment
| Product | Telerik UI for ASP.NET MVC Grid |
| Progress Telerik UI for ASP.NET MVC version | Created with the 2022.2.621 version |
Description
How can I implement row numbers in a Telerik UI for ASP.NET MVC 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(@<text></text>).ClientTemplate("#= 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.