Using MVC
Using Javascript
<script type="text/javascript"> var rowNumber = 0; function resetRowNumber(e) { rowNumber = 0; } function renderNumber(data) { return ++rowNumber; } function renderRecordNumber(data) { var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1; var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize))); } </script> @(Html.Kendo().Grid<MvcApplication1.Models.TestModels>() .Name("Grid") .Columns(columns => { columns.Bound(p => p.ID); columns.Bound(p => p.Name); columns.Template(t => { }).Title("Row No").ClientTemplate( "#= renderNumber(data) #" ); columns.Template(t => { }).Title("Record No").ClientTemplate( "#= renderRecordNumber(data) #" ); }) .Pageable(x => x.PageSizes(new int[] { 10, 20, 30, 50 }).Refresh(true)) .Sortable() .Filterable() .DataSource(dataSource => dataSource.Ajax() .Read(read => read.Action("Grid_Read", "Home")) ) .Events(ev => ev.DataBound("resetRowNumber")) )
Using Javascript
<div id="Grid"> </div> <script> var rowNumber = 0; function resetRowNumber(e) { rowNumber = 0; } function renderNumber(data) { return ++rowNumber; } function renderRecordNumber(data) { var page = parseInt($("#Grid").data("kendoGrid").dataSource.page()) - 1; var pagesize = $("#Grid").data("kendoGrid").dataSource.pageSize(); return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize))); } $(document).ready(function () { $("#Grid").kendoGrid({ dataSource: { type: "odata", transport: { read: "http://demos.kendoui.com/service/Northwind.svc/Orders", dataType: "jsonp" }, pageSize: 10 }, pageable: { refresh: true, pageSizes: true }, dataBound: resetRowNumber, columns: [ { field: "OrderID", title: "Order ID", width: 60 }, { field: "CustomerID", title: "Customer ID", width: 90 }, { title: "Row No", width: 90, template: "#= renderNumber(data) #" }, { title: "Record No", width: 90, template: "#= renderRecordNumber(data) #" } ] }); }); </script>