While using the kendo ui - grid control, I encountered an issue where resetting the data source did not automatically bring the grids scroll position back to the top.
To address this, I tried adding a jquery scrollTop(0) call after refreshing the datasource. It worked on desktop browsers but not on iPads.
$("#switch-data-btn").on("click", function(){
grid.dataSource.data(currentData);
grid.dataSource.transport.data = currentData;
grid.content.scrollTop(0);
grid.refresh();
});
I then opted to destroy and rebuild the grid instead of simply refreshing the data. This eliminated the need for the scrollTop(0) call and resolved the issue.
$("#switch-data-btn").on("click", function() {
buildGrid(currentData);
// buildGrid() destroys the grid, empties the dom element and recreates it.
});
Although the above solution is effective for a specific scenario, it has its limitations. For instance, attempting to scroll to a specific position with scrollTop() on an iPad may result in being unable to scroll back up to view earlier results (unlike on desktop browsers).
$("#switch-data-btn").on("click", function() {
buildGrid(currentData);
grid.content.scrollTop(50);
});
Are there any suggestions on efficiently reloading data into an existing kendo grid and scrolling to a desired position that works consistently across various browsers?