This is a migrated thread and some comments may be shown as answers.

Virtual scrolling issue with server paging

6 Answers 270 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Christoph
Top achievements
Rank 1
Christoph asked on 23 Mar 2017, 11:48 AM

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

 

6 Answers, 1 is accepted

Sort by
0
Christoph
Top achievements
Rank 1
answered on 23 Mar 2017, 12:51 PM

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)


0
Tsvetina
Telerik team
answered on 27 Mar 2017, 07:16 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Christoph
Top achievements
Rank 1
answered on 27 Mar 2017, 09:45 AM

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.

0
Tsvetina
Telerik team
answered on 29 Mar 2017, 07:28 AM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Christoph
Top achievements
Rank 1
answered on 29 Mar 2017, 03:21 PM

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".

0
Tsvetina
Telerik team
answered on 30 Mar 2017, 02:12 PM
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
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
Grid
Asked by
Christoph
Top achievements
Rank 1
Answers by
Christoph
Top achievements
Rank 1
Tsvetina
Telerik team
Share this question
or