Row Number In Kendo grid

9 posts, 0 answers
  1. mayank
    mayank avatar
    11 posts
    Member since:
    Sep 2012

    Posted 19 Jun 2013 Link to this post

    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

  2. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 19 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. mayank
    mayank avatar
    11 posts
    Member since:
    Sep 2012

    Posted 20 Jun 2013 Link to this post

    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.
  4. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 21 Jun 2013 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  5. Prasert
    Prasert avatar
    3 posts
    Member since:
    May 2015

    Posted 28 Aug 2015 in reply to Dimo Link to this post

    I have a question one that how to reset row number depend group. 
  6. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 01 Sep 2015 Link to this post

    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
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  7. hosayn
    hosayn avatar
    1 posts
    Member since:
    Jun 2016

    Posted 06 Jul 2016 Link to this post

    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.

  8. Larry
    Larry avatar
    27 posts
    Member since:
    Apr 2017

    Posted 07 Nov 2017 Link to this post

    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

     

  9. Dimo
    Admin
    Dimo avatar
    8457 posts

    Posted 08 Nov 2017 Link to this post

    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
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top