Kendo UI Grid Serial number column

Question

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

Answer 1

You can implement this using a template column. Here is a live demo showing how to do that: http://jsbin.com/olutin/10/edit

Answer 2

Script Section

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

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


  @(Html.Kendo().Grid()   
            .Name("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 & s.no just hide one column (0) using jquery

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