Strait forward way to select first row row of a grid after a refresh

9 posts, 1 answers
  1. Simon
    Simon avatar
    163 posts
    Member since:
    Sep 2010

    Posted 11 Apr 2013 Link to this post

    I have a  virtual remote data enabled grid configured like this:

    var myDataSource = new kendo.data.DataSource({
        transport: {
            read: {
                url: 'http://localhost/MyODataService.asmx',
                dataType: 'jsonp',
                data: {
                    $select: 'RecordID, FirstName, LastName'
     
                }
            },
            parameterMap: function (data, operation) {
                if (operation == 'read') {
                    return kendo.data.transports['odata'].parameterMap(data, operation);
                } else {
                    return JSON.stringify(data.models);
                }
     
            }
     
        },
        type: 'odata',
        pageSize: 200,
        serverPaging: true,
        serverSorting: true,
        batch: true
    });
     
     
    jQueryGrid.kendoGrid({
        dataSource: myDataSource
        height: 530,
        scrollable: {
            virtual: true
        },
        reorderable: true,
        resizable: true,
        sortable: true,
        columns: ['RecordID', 'FirstName', 'LastName'],
        selectable: 'row'
    });
    Basically, I would like to refresh the grid, scroll all the way up (usually, this is done by the refresh call) and finally, I would like to select the first row.

    I created the following code:

    myGrid.data('kendoGrid').dataSource.read();
    myGrid.data('kendoGrid').refresh();
    myGrid.data('kendoGrid').select('tr:eq(0)');
    However, the call to the refresh function is executed asynchronously. As the grid datasource is consuming an OData service to load only a subset of data when you scroll up or down, it does make sense.

    So even if the call to the refresh function is made before the select call, the displayed row will be updated after the select call and will also remove any row selection in the grid.

    I know it could possible to solve this problem by creating some kind of message system that could be handled by the grid's dataBound event, but I would like to know if anyone has a more simple solution for this.

    Best regards,

    Simon
  2. Answer
    Vladimir Iliev
    Admin
    Vladimir Iliev avatar
    2191 posts

    Posted 15 Apr 2013 Link to this post

    Hi Simon,

    I would suggest to use the dataSource page method to change the grid page to the first page which will automatically refresh the grid data (using only one request) and then using setTimeout method to select the first row. Please check the example below:

    function scrollToTop() {
        var grid = $("#grid").data("kendoGrid");
        grid.content.find(".k-scrollbar-vertical").scrollTop(0);
     
        grid.one("dataBound", function (e) {
            //select the first row
            setTimeout(function () {
                grid.select(e.sender.tbody.find("tr:first"));
            }, 50)
        });
     
        //change the page to 1 when server operations are used will refresh the data
        grid.dataSource.page(1);
    }


    Kind Regards,
    Vladimir Iliev
    the Telerik team
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Simon
    Simon avatar
    163 posts
    Member since:
    Sep 2010

    Posted 18 Apr 2013 Link to this post

    Brillant Vladimir!

    I updated the setTimeout function to raise the click event but your solution was exactly what I was looking for.

    setTimeout(function () {
         
        var row = e.sender.tbody.find('tr:first');
         
        kendoGrid.select(row);
        row.trigger('click');
     
    }, 50)
  4. Wilder
    Wilder avatar
    2 posts
    Member since:
    Apr 2013

    Posted 05 Sep in reply to Simon Link to this post

    The application I am working on has a scrolling grid with buttons that go to successive pages (1), (2), (3), etc.  Currently when I bring up the first page and scroll halfway down and then press (2) to go to the second page the vertical scrollbar stays in the same position. 

    The desired change is to have the scroller positioned at the top of the grid when  I press (2) to go to the second page.

    I inserted the two functions above scrollToTop posted by Vladimir Illiev and then setTimeout posted by Simon.  When I ran the program I got a JavaScript runtime error: "e" is undefined.  When I comment out the setTimeout posted by Simon, there is no error but the current behavior ( described in paragraph 1 ) remains.  Any suggestions?

  5. Wilder
    Wilder avatar
    2 posts
    Member since:
    Apr 2013

    Posted 05 Sep in reply to Wilder Link to this post

    Correction: ( second paragraph )

    The desired change is to have the scroller positioned at the top of the grid after I press (2) to go to the second page.

  6. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2090 posts

    Posted 07 Sep Link to this post

    Hi Wilder,

    In order to scroll the grid to top I would suggest handling the page event for it. In the handler you can get reference of the scrollable area and use scrollTop() method to set the scroll position.

    The sample below illustrates the approach:



    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  7. John
    John avatar
    2 posts
    Member since:
    Nov 2015

    Posted 10 Sep Link to this post

    Hi Viktor,

    does this approach work with SignalR? it appears the Page Event fires prior to the data being refreshed in the grid.

  8. Viktor Tachev
    Admin
    Viktor Tachev avatar
    2090 posts

    Posted 12 Sep Link to this post

    Hi John,

    I tested the behavior with our SignalR example and setting the scroll position when paging works as expected on my end. Please check out the sample below as reference. 



    Regards,
    Viktor Tachev
    Progress Telerik
    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
  9. John
    John avatar
    2 posts
    Member since:
    Nov 2015

    Posted 12 Sep in reply to Viktor Tachev Link to this post

    thank you victor. It did work with an additional step which was suggested by this article.

    https://github.com/telerik/kendo-ui-core/issues/4058

     

    we are using Kendo UI Version 2017.2.621

     

    regards,

     

    John 

     

     

Back to Top