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>
When you edit a Column the Row Number does not get updated correctly for the edited Row.
ReplyDeleteI have tried with the below URL but not able to reproduce issue.
ReplyDeletehttp://demos.telerik.com/kendo-ui/web/grid/editing-inline.html
In case of virtual scrolling enabled, how can you keep track with serial number column?
ReplyDeleteThx
I will try to implement this functionality with virtual scrolling and update you soon.
ReplyDeleteJayesh,
DeleteThank you!
Nice!
ReplyDeleteThiet Ke Nha Dep
Hi!
ReplyDeleteMaybe can you help me?
Kendo grid allows grouping data and I need to reset serial number for each group
how can I do it?
We cannot achieve this thing if paging is enabled in kendo-ui grid and in that case you have manage this thing in datasource.
ReplyDeleteIs paging is enabled in your grid?