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

4 Answers 5752 Views
Grid
Simon
Top achievements
Rank 1
Simon asked on 11 Apr 2013, 02:54 PM
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

4 Answers, 1 is accepted

Sort by
0
Accepted
Vladimir Iliev
Telerik team
answered on 15 Apr 2013, 11:34 AM
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!
Simon
Top achievements
Rank 1
commented on 18 Apr 2013, 07:47 PM

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)
Wilder
Top achievements
Rank 1
commented on 05 Sep 2018, 02:38 PM

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?

Wilder
Top achievements
Rank 1
commented on 05 Sep 2018, 02:43 PM

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.

0
Viktor Tachev
Telerik team
answered on 07 Sep 2018, 08:11 AM
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.
John
Top achievements
Rank 1
commented on 10 Sep 2018, 03:22 PM

Hi Viktor,

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

0
Viktor Tachev
Telerik team
answered on 12 Sep 2018, 10:04 AM
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.
0
John
Top achievements
Rank 1
answered on 12 Sep 2018, 01:38 PM

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 

 

 

Tags
Grid
Asked by
Simon
Top achievements
Rank 1
Answers by
Vladimir Iliev
Telerik team
Viktor Tachev
Telerik team
John
Top achievements
Rank 1
Share this question
or