Virtual scrolling issue with server paging

7 posts, 0 answers
  1. Christoph
    Christoph avatar
    7 posts
    Member since:
    Aug 2015

    Posted 23 Mar 2017 Link to this post

    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

     

  2. Christoph
    Christoph avatar
    7 posts
    Member since:
    Aug 2015

    Posted 23 Mar 2017 in reply to Christoph Link to this post

    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)


  3. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 27 Mar 2017 Link to this post

    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.
  4. Christoph
    Christoph avatar
    7 posts
    Member since:
    Aug 2015

    Posted 27 Mar 2017 in reply to Tsvetina Link to this post

    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.

  5. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 29 Mar 2017 Link to this post

    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.
  6. Christoph
    Christoph avatar
    7 posts
    Member since:
    Aug 2015

    Posted 29 Mar 2017 in reply to Tsvetina Link to this post

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

  7. Tsvetina
    Admin
    Tsvetina avatar
    2481 posts

    Posted 30 Mar 2017 Link to this post

    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.
Back to Top