Kendo UI Grid Serial number column

I am trying to put the first column of the Kendo grid as the serial index, which is not affected by sorting of the row records. Is there any way I can achieve this? Thank You



You can implement this using a template column. Here is a live demo showing how to do that:


Script Section

           var rowNumber = 0;
        function resetRowNumber(e) {
            rowNumber = 0;
        function renderNumber(data) {
            return ++rowNumber;
        function renderRecordNumber(data) {
            var page = parseInt($("#Role").data("kendoGrid") - 1;
            var pagesize = $("#Role").data("kendoGrid").dataSource.pageSize();
            return parseInt(rowNumber + (parseInt(page) * parseInt(pagesize)));

  **Kendo Grid**------------------------------------------------       

            .Columns(columns => {
                columns.Template(t => { }).Title("Record Per page").ClientTemplate("#= renderNumber(data) #");
            columns.Template(t => { }).Title("S.No").ClientTemplate("#= renderRecordNumber(data) #"); 
            .Events(ev => ev.DataBound("resetRowNumber"))

It will return two column e.g record per page & just hide one column (0) using jquery

        $(document).ready(function () {
            var grid = $("#Role").data("kendoGrid");


Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.