Row Number In Kendo grid

[mayank]

i am using kendo grid.
is there any inbuilt API for generate Row Number  Column in kendo Grid.

i tried this way in onGridDataBound Event.

           gridName = gridName == null ? '' : '#' + gridName;
           var dataTable = $(gridName + ' .k-grid-header table');
           var ContentTable = $(gridName + ' .k-grid-content table tr');
           if(dataTable.find('th[role=RowNumber]').length == 0)
           {
              dataTable.first().find('thead tr th:eq(0)').before("<th  width='100px' scope='col' role='RowNumber' >Row Number</th>");
           }
           var hasRowNumber  = ContentTable.first().find('td.rownumber').length == 0 ? true : false;
           ContentTable.each(function(index, row){
                  if(hasRowNumber)
                  {
                    $(row).find('td').first().before("<td title='RowNumber' role='gridcell' class='rownumber' >"+ (index + 1)+"</td>");
                  }
                  else
                  {
                    $(row).find('td.rownumber').html(index + 1);
                  }
          });


but when i change data source client side then it's not working.

please help

Thanks,

Mayank

[Dimo]

Hello Mayank,

Adding table cells manually this way is not recommended. To begin with, you should at least include an additional <col> element in both Grid tables, but this will still not guarantee proper Grid operation in all scenarios, because the widget will have one more column than expected.

I advise you to use a template column instead.

Regards,
Dimo
Telerik

[mayank]

Hello Dim,

Thanks for your reply.
We have already implemented kendo grid in several pages. We are using the object model in MVC and provided syntax is for javascript, could you provide the kendo mvc object model example or some script based solution, which can be applied in several pages with least effort.

Thanks.

[Dimo]

Hello Mayank,

You can use the same approach as the one you are already using. Simply do not add table cells to the DOM, but use the already available cells from the empty template column.

If you are interested in using templates with a Kendo UI MVC Grid, you can obtain more information at

client templates for Ajax-bound Grid
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-have-conditional-logic-in-a-column-client-template?

server templates for server-bound Grid
http://docs.kendoui.com/getting-started/using-kendo-with/aspnet-mvc/helpers/grid/faq#how-do-i-customize-the-way-a-property-is-displayed-in-a-grid-bound-column?


Here is a simple demo with an Ajax-bound Grid.

<script>

var rowNumber = 0;

function resetRowNumber(e) {
    rowNumber = 0;
}

function renderNumber(data) {
    return ++rowNumber;
}

</script>

@(Html.Kendo().Grid()
    .Name("grid")
    .Columns(columns => {
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
    })
    .Events(ev => ev.DataBound("resetRowNumber"))
)

Regards,
Dimo
Telerik

[Prasert]

I have a question one that how to reset row number depend group. 

[Dimo]

Hello Prasert,

When column templates are rendered, you have no access to the Grid table structure. In order to reset the row counter for each group, you will need to apply the row numbers in the Grid's dataBound event. Get the tbody of the data table, iterate the table rows and inject the correct numbers by using standard DOM manipulation techniques.

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-dataBound

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#fields-tbody

Grouping rows can be distinguished from other data rows by their CSS class - "k-grouping-row"

Regards,
Dimo
Telerik

[hosayn]

I tried the mentioned code above:

<script>

var rowNumber = 0;

function resetRowNumber(e) {
    rowNumber = 0;
}

function renderNumber(data) {
    return ++rowNumber;
}

</script>

@(Html.Kendo().Grid()   
    .Name("grid")
    .Columns(columns => {
        columns.Template(t => { }).Title("Row No").ClientTemplate(
            "#= renderNumber(data) #"
        );
    })
    .Events(ev => ev.DataBound("resetRowNumber"))
)

 

And it is working, but with grid that have pagination it fails displaying the correct numbering when jumping back and forth, and I fixed it by resetting the rowNumber with every pager change in the onDataBinding event as following:

   function onDataBinding(e){
        //Implement the event handler for DataBinding        
        var page = e.sender.dataSource.page();
        var pageSize = e.sender.dataSource.pageSize();
        // reset row number based on the selected page in the pager 
        rowNumber = (page - 1) * pageSize;
    }

Also, no need for data parameter in the following function:

 function renderNumber(data) {
        return ++rowNumber;
    }

 

So, it will be:

 function renderNumber() {
        return ++rowNumber;
    }

 

And no need to reset the rowNumber at onDataBound event.

I hope it help who faces the same issues.

[Larry]

I am also using the "Sortable" widget which allows re-ordering the rows through drag and drop.

I would like to maintain and persist the row number in the database so the final order is retained.

Would this above method be recommended for setting and the row number in this case?

There is no paging, only scrolling in this grid.

Thanks much,

Larry

 

[Dimo]

Hi Larry,

The above posts discuss how to add row indexes to Grid rows as a purely visual effect. If you wish to save row numbers in the database, you will need a field in the dataSource, which the "Row Index" column will be bound to. After the user reorders some rows, you will modify the data item values programmatically and submit the changes to the server.

https://docs.telerik.com/kendo-ui/api/javascript/ui/grid#methods-dataItem

https://docs.telerik.com/kendo-ui/api/javascript/data/observableobject#methods-set

The Grid will need to be sorted by the row index column and configured for CRUD operations (ideally, batch editing, so that you can submit all new indexes in one request).

https://docs.telerik.com/aspnet-mvc/helpers/grid/editing/batch-editing

Regards,
Dimo
Progress Telerik