[Solved] Broken Grid with scrollable.virtual and serverPaging = true

[Rowan]

We are trying to implement Grids with scrollable.virtual = true using a DataSource with serverPaging = true, where the data in the datasource is updating frequently (every second). I have tried two approaches:

1. Using a timer to trigger DataSource.read() every second.
or
2. Registering transport.push and using that to call pushUpdate every second with the updated items.

In both cases the results are extremely buggy, the scroll bar and rows jump around each time read() or pushUpdate() is called, and if the user happens to be scrolling at the time the update occurs, often the scroll bar will get stuck in a weird broken state.

What is the recommend way to implement virtual scrolling + serverPaging with dynamically updating data?

thank you,
Rowan

[Dimo]

Hello Rowan,

Unfortunately, live updates are not supported together with virtual scrolling, because there is no reliable way to place the scrollbar thumb at a specific position, which corresponds to a particular table row.

In general, when virtual scrolling is enabled, the logic of loading data items and moving the scrollbar goes in one direction only - moving the scrollbar leads to showing of specific table rows, but the opposite is not possible.

Please resort to standard paging in this case.

Regards,
Dimo
Telerik

[Rowan]

Hi Dimo,

I actually got this working with virtual scrolling perfectly using a fairly simple change. As you pointed out the issue is that the virtual scroll bar controls the requests, so all I had to do was force it to re-issue a request for it's current state (the same as if a scroll had occured). I just had to extend Grid with the below code:

// Update dynamic data in the grid by re-requesting from the data source
update: function() {

    // Notify scrollable request is happening
    this.virtualScrollable._fetching = true;

    // Clear dataSource range cache, then trigger a request for the current virtual scrollable range
    this.dataSource._ranges = [];
    this.datasource.range(this.virtualScrollable._rangeStart, this.datasource.pageSize());
}

This all works exactly as expected. The data source does a read from the server of only the 1 or 2 pages mapped to the current dataSource.view(), and the displayed data all refreshes without interfering with the scrollbar state.

Given that the solution is simple but touches kendo internals, it would be really great if this could be cleaned up and become an official part of the api. It is a really powerful feature!! I can now have large scrollable grids with thousands of items continuously updating, but server requests are only issued for the 1 or 2 pages actually visible in the current .view().

An even more robust fix would just be for dataSource itself to track when it's current .view() was generated by a .range(...) call. If the current view did represent a range (rather than a single page), then a call to .read() would just do what my code above does... clear the range cache and re-issue the same range call.

[Dimo]

Hello Rowan,

You can use the demonstrated approach if you like, but I am afraid we cannot implement it in the source code.

Regards,
Dimo
Telerik

[Rowan]

Hi Dimo,

Out of curiosity is there any reason Telerik can't add this in? I am aware the code I posted is very basic and doesn't handle all edge cases, but it would be pretty easy to clean up and make robust.

I find your response strange because this is a really powerful feature that I'm sure others would find useful as well. It is already 99% implemented in the existing code, so why not just expose it in the official api?

thanks,
Rowan

[Dimo]

Hello Rowan,

The proposed technique relies on constantly clearing the Grid's data item cache, which can lead to a lot more requests to the dataSource, than are normally necessary.

Regards,
Dimo
Telerik

[Rowan]

Hi Dimo,

I think you misunderstand. The entire point here is to get the equivalent of DataSource.read(), but have it work with virtual scrolling. DataSource.read() clears the entire cache and throws out all existing data. (If you look at the source code you will see it even does the same _ranges = [] that my code does)

So what I have proposed is no different to DataSource.read(). The whole point of .read(), and my proposal, is that they are called when all data is stale, including cached data and hence it is by design that they need to re-request pages from the dataSource.

regards,
Rowan

[Dimo]

Hello Rowan,

It is true that the data item cache (i.e. _ranges) is cleared when dataSource.read() is executed, however, the Grid never executes this method on its own.

In addition, the Kendo UI DataSource only requests whole pages with its read() method, while you need to request chunks of pages, depending on the Grid scroll position. This will require tight coupling between the Grid and the DataSource and the dataSource instance should be refreshed in the context of the Grid, which now doesn't happen that way.

I consulted our Grid developers once again with regard to our discussion and I confirm that we will refrain from implementing the discussed functionality out-of-the-box.

Regards,
Dimo
Telerik