Data source refresh issue with a grid with server paging enabled

[Alexander]

Hello,

I have a grid that loads data from a web-service. A server paging and virtual scrolling are enabled.
Let's consider the following scenario:
1) Run a report (Unzip the solution and press F5)
2) Scroll grid down and stop in the middle => data is loaded properly from a web service. See img1.png: the top row id is 4096

Now let's assume the server data is changed and I need manually refresh the current page.
3) Click "Refresh DS" button => data is reloaded, but it is shifted (!). See img2.png: the top row id is 4135

I attached the sample project that demonstrates the issue.
My JavaScript code is in testReport.js file.

Could you please review the project and advise how to manually refresh the active view without data shifting: only "value" column should be updated but a row ID before and after "refresh" must be the same.

[Alexander]

I created a fiddle that demonstrates the issue: http://jsfiddle.net/0s39z994/
The web-service response is simulated, because it has nothing to do with the issue

[Dimo]

Hi Eli,

When virtual scrolling is used, the calculation logic related to the virtual scroll position and the visible table rows goes only in one direction - from the scroll position to the table's scroll offset, but not the other way around. When you scroll to a particular position in the table, you are seeing parts of several pages (e.g. 3 and 4), however, when the data is refreshed manually, only one page is requested and displayed (e.g. 3 or 4). Eventhough the new table will have the same scroll offset as before, the rendered rows are different. That's why there is no way to ensure that the newly rendered rows will be at the exact same visible position.

I am afraid the described behavior is not supported. Sorry about that.

Regards,
Dimo
Telerik

 

[Alexander]

What about this workaround:

    var kendoGrid = $("#grid").data("kendoGrid");
    var firstItemInView = kendoGrid.dataSource._view[0];
    kendoGrid.dataSource._skip = firstItemInView.id;
    kendoGrid.dataSource.read();

Please review and let me know if you foresee any issue with it. 
The idea is to correct "skip" variable that you pass during the read action and take the 1st one from the active page.
Updated the fiddle: http://jsfiddle.net/0s39z994/

[Dimo]

Hi Eli,

There are two issues that I see with this approach -

1. In some occasions (after refreshing), scrolling to the bottom is not able to display the last row (4999). You can test this with the latest Kendo UI version, which seems to resolve this.

2. When the Grid is scrolled (close) to the bottom, a too large skip value is passed to the dataSource when you click on the refresh button. This results in a Javascript error, because there is no row with a (skip + 100) index in the allRows array.

In addition, when the data is refreshed manually, the Grid caches a data item range, which does not correspond to a particular page (e.g. 1-100, 101-200, etc), but a custom range (e.g. 131-230). For the time being I don't see negative side effects of this.

Regards,
Dimo
Telerik

 

 

[Alexander]

Thanks for the reply.

Regarding the issues:
1) I observe it in the fiddle only. When I use a web-service response there is not such issue (but will double check);
2) The same as point 1: the issue is only in this particular example and when I use a web service response it works fine

About custom page range I agree with you, but this is a work around. It just demonstrates that it possible to do something to achieve the required result. If the only one page is requested during the read, why cannot you create another method "smartRead" which would know which pages are in use, request them both (just update data) and force a grid to repaint with updated data. I think that this approach is more advanced and the behavior is more obvious and correct.

Meanwhile could you please show me in the code where exactly you force a grid to repaint and what data grid takes for this action (a variable that contains cached data). We bought the commercial license and have the source code. It will help us to understand your code better.

[Dimo]

Hi Eli,

See the refresh methods inside kendo.grid.js. There are two - one for the Grid object and one for the VirtualScrollable object. The first one takes care of rendering the table rows, the second one takes care of rendering the virtual scrollbar.

Regards,
Dimo
Telerik

 

 

[Alexander]

Ok, thanks.

So to summarize. There are 2 possible workarounds:

1) Set a "_skip" variable of a data source before calling its "read" method:
kendoGrid.dataSource._skip = kendoGrid.virtualScrollable._rangeStart;

2) Manually update dataSource._ranges[N].data collection and call kendoGrid.refresh();

[Alexander]

Also I'd suggest Telerik's dev team to make the discussed behavior "out-of-the-box", because it's much more obvious than the current one.