Endless scroll & virtual scroll not working on Grid

[Guittier]

Hello,

I want to user a Grid with a Rest API, by remote data loading.

To load only few datas at one time, i want to use : endless scroll or virtual scroll.

But I'm not able to make it works.

On my rest API, i made a specific way, which load only 50 items with an offset (with the sort & take parameter of State given to my api).

But on the grid :

- I have 15 visibles lines on my grid (set by RowHeight), I load 50 items by my rest API. 

- in endless scroll mode, the scrollBottom event never fire, so it doesn't load more data.

- in virtual scroll mode, the pageChange event only fire once. 

I have more than 10K lines in my database, i was able on to view 60 of them...

Is there a specific setting to apply ?

 

 

 

[Dimiter Topalov]

Hi Guittier,

The Grid virtual scrolling functionality relies on emitting the pageChange (and dataStateChange) events each time the scroll position of the scrollable container reaches a certain point, calculated based on the provided rowHeight and pageSize. When the pageChange/dataStateChange event is emitted, the developer is in command of issuing the appropriate data service call that in turn will make the HTTP request to the server, sending the current skip and take values:

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/virtual/

Here is an example of virtual scrolling with remote data that illustrates the described behavior (the second documentation demo from the section linked above):

https://stackblitz.com/edit/angular-yoaiat?file=app/app.component.ts

As for the endless scrolling mode, the Grid relies on emitting the scrollBottom event, but it was introduced in version 3.11 (and patched in v. 3.12) of the Grid package - please make sure that you are using the latest versions of our packages so that the mentioned event is emitted as expected (like in this demo):

https://www.telerik.com/kendo-angular-ui/components/grid/scroll-modes/#toc-endless-scrolling

It is also worth mentioning that the endless scrolling functionality just adds new items to the collection the Grid is bound to and after a certain browser- and system-specific threshold is reached, and too many DOM elements are rendered at the same time (e.g. 1000 grid rows), performance issues will inevitably arise. This is why the Virtual Scrolling (as opposed to endless scrolling) functionality is more preferable in such scenarios when a very large number of Grid rows can be potentially loaded.

To sum up - to use the Virtual Scrolling functionality, the prerequisites outlined in the section, linked at the beginning of this post should be met - more specifically the rowHeight should be set such that it matches the actual row height of each row in the DOM, all rows must be of equal height, the Grid height must be set, and the page size should exceed the number of visible items (ideally it should be around 3 times the visible items for best performance and scrolling experience).

I hope upgrading to the latest version of the Grid package, and comparing your implementation to the examples above will help resolving the described problems, but if some or all of them persist, please send us a similar isolated runnable project where they can be observed, so we can inspect it further, and determine what might be causing them. Thank you in advance.

Regards,
Dimiter Topalov
Progress Telerik

[Guittier]

Thanks for the answer, Dimiter.

For endless scroll, it must be a problem with my version (i'm in 3.10.2 for the moment).

With the example, I'm able to load the data with virtual scrolling mode. In my previous tests, I was loading data with  "process" from Data Query.to use my object.

With the example, the data are load in a GridDataResult and the data are load in an array of any[] where I wan't a array of Log[] (my object class). 

Is there a solution to keep the typing of my data ?

 

[Dimiter Topalov]

Hello Guittier,

The GridDataResult "data" property is of type any[], so you should be able to provide any Array as its value. A possible approach to keep the type of the data after the server response arrives would be to cast the incoming collection to the desired type, for example:

interface Order {
  OrderID: string;
  ShipName: string;
  ShipAddress: string;
  ShipCity: string;
  ShipCountry: string;
}

public fetch(state: any): Observable<GridDataResult> {
        const queryStr = `${toODataString(state)}&$count=true`;

        return this.http
            .get(`${this.BASE_URL}${this.tableName}?${queryStr}`)
            .pipe(
                map(response => (<GridDataResult>{
                    data: <Order[]>response['value'],
                    total: parseInt(response['@odata.count'], 10)
                }))
            );
    }

https://stackblitz.com/edit/angular-bwxj8j?file=app/northwind.service.ts

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Guittier]

Thanks a lot for your answer. It works like a charm now !!

[Ravikant]

Hi Dimiter,

When ever i visited for any answer related to Kendo, i  always seen you reply. Hope you will also provide solution on my query.

Thank you in advance.

I am also using Kendo grid to load the data. I have used above said Virtual Scrolling approach to achieve grid performance. The approach is working fine but it left us with some problem on the grid, below are described.

Taking an example like in a process i have 50K of records with 115 columns-
1> When i scroll for next records, Grid should start to display just next records from the previously where were left. i.e. for an example currently my grid is displaying records from 1 -to- 100 and i scroll down then it should start to display records from 101 to next. Instead of this it shows the records starting from any position like 130 or 140.
Good thing is cursor works fine and i can see all records by scrolling the scrollbar but it should start to display from very first of next records.
2> when i scroll down the vertical scrollbar slowly-slowly then it works fine, but when i scroll down the scrollbar to the mid of grid in a single shot then ideally it should show records from 25100 - to - 25199 as i am having page size or take of 100 records. or in the case if i scroll down to last of grid then it should display last 100 records i.e. from 49900 - to - 50000.
instead of above expected results it just displayed 600 or 700 next records from current position. for and example if i am at records from 1100 - to- 1200 then after scrolling to the end of grid, it will show from 1700 -to- 1800.
Now the problem is since my vertical scrollbar has reached to the end of grid so i can't go ahead to see next records.
3> when i scroll back to see previous records and i came to my initial records i.e. from 1 -to- 100,Grid fires pageChange on scroll top even if i am on my initial records. 

 

[Martin Bechev]

Hi Ravikant,

A similar topic is discussed in private support thread - 1477766. 

Point 1 and 3 seems to be expected using virtual scrolling, since the skip and take values are dynamic numbers determined internally by the rowHeight, height, and scroll position. Firing pageChange is required in order to load next or previous portion of data.

Regarding the second point, such behavior does not appear in a properly configured Grid.

Regards,
Martin
Progress Telerik