Virtual scrolling issue with server paging

[Christoph]

Hello there,

I'm developing a AngularJS (1) application and want to use the Grid widget with a virtual scrolling enabled.

Data comes from an API call which returns a JSON object in the following format:

{

     gridOptions: { ... }

     dataSource: { ... }

     data: {  Array[row objects]  }

     total: { ... }

}

A custom read() function is used to fetch new data from the server. It gives the above mentioned JSON object to the grid via e.success().

However when scrolling down the grid at first a request is made and when scrolling further down at a certain point new requests are started over and over, each with query parameters for the next and the previous data page, in alternating order. The data is never bound and the grid remains unusable.

I attached the JSON response from the server which contains gridOptions, dataSource and data.

 

I'd be really thankful if you could offer some advice on how to solve this.

 

Best regards

 

[Christoph]

To clarify:

Kendo version: v2016.3.914

Browser: Chrome Version 57.0.2987.110 (64-bit) and Firefox 52.0.1 (64-Bit)

OS: Linux (4.10.4-1-ck-haswell)

[Tsvetina]

Hi Christoph,

I checked your Grid and DataSource options but I didn't find find transport options for the remote Grid binding. Note that if you enable server paging (sorting, filtering, etc.), the Grid DataSource has to be configured to make and handle the requests for server-side paging and the remote point that is queried in these requests, must be able to provide paged data based on the parameters passed.
If this is not possible, you should switch to client-side data virtualization by disabling server operations in the DataSouce (serverPaging: false, serverSorting: false, etc.).

Regards,
Tsvetina
Telerik by Progress

[Christoph]

Hi Tsvetina,

thanks for your reply.

As stated above a custom transport function is assigned to the DataSource configuration dynamically when the server's response containing GridOptions etc. arrives:

01.function getRequest(e) {
02.    var query = {};
03.    var queryString = '';
04.
05.    // Pager
06.    query.slice = dataHelper.getSlice(e.data['skip'], e.data['page'], e.data['pageSize'], e.data['take']);
07.
08.    // Sorting
09.    if (_.has(e.data, 'sort')) {
10.        var sort = e.data.sort;
11.
12.        if (!_.isUndefined(sort)) {
13.            if (_.keys(sort).length > 0) {
14.                query.order_by = sort[0].field;
15.                query.order_dir = sort[0].dir;
16.            }
17.        }
18.    }
19.
20.    // Filters
21.    if (_.has(e.data, 'filter') && !_.isUndefined(e.data.filter)) {
22.        query.filter = JSON.stringify(e.data.filter);
23.    }
24.
25.    // Grouping
26.    if (_.has(e.data, 'group')) {
27.        query.group_by = JSON.stringify(e.data.group)
28.    }
29.
30.    if (_.size(query) > 0) {
31.        var queryDivider = '?';
32.
33.        if(url.indexOf('?') > -1) {
34.            queryDivider = '&';
35.        }
36.
37.        queryString = queryDivider + jQuery.param(query);
38.    }
39.
40.    $http.get(url + queryString)
41.        .then(function (res) {
42.            if (_.has(res.data, 'data') && _.isNull(_.first(res.data.data))) {
43.                res.data.data = [];
44.            }
45.
46.            e.success(res.data);
47.        })
48.        .catch(xhrFail);
49.}

 

 

When moving the scroll bar / scrolling the grid the requests are made but at some point it hangs in an infinite loop.

[Tsvetina]

Hello Christoph,

I do not see in your logic where you set the total of the returned data. Can you confirm that it is returned correctly with each requests. Usually, the reason for failed virtual scrolling are incorrect or missing totals. This has also been discussed in the following forum thread:
Grid remote data virtualization with custom transport.read method?

Regards,
Tsvetina
Telerik by Progress

[Christoph]

Hi Tsvetina,

the "dataSource.schema.total" field is included in the dataSource field of the object I get as a response from the server. The file is attached to the first post.

      "schema":{
         "aggregates":"aggregates",
         "total":"total",
         "data":"data",
         "model":{
...
}
}

 

Also included in the server response are the fields "data" and "total".

[Tsvetina]

Hi Christoph,

If the correct total value and correct paged data are returned to the Grid, with a consistent format, then I cannot suggest a different reason for the hang in virtual scrolling. Could you put up a sample project, which demonstrates the issue and include it in a support ticket, if it contains sensitive data?

Regards,
Tsvetina
Telerik by Progress