Syncing pager with grid causes 2 service calls

4 posts, 0 answers
  1. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 19 Aug Link to this post

    I am using the grid in an Angular component with calls to an API.  In order to set the API parameters from another set of controls, I use the read function in the dataSource transport.  My initial attempt at this function used the options.data.take and options.data.skip to set up the count and offset in my API, as well.  In the grid options, I have the pageable set to an object with pageSizes and buttonCount.  I can pull the correct data into the grid and use the pager at the bottom to move between pages.  When the external filters object that is an input for my Angular component changes, the grid rebinds using k-rebind in the kendo-grid tag on the Angular view.  This works most of the time.  

    The issue I have is when I have something with a lot of data and move to one of the later pages using the pager.  If I then change my external filters to give me a smaller set of data, the grid attempts to rebind while on a page that is AFTER the last page in the new dataSource.  Based on several questions I have seen, I added code to reset the dataSource.page to 1 in the read function prior to refreshing the data through the API.  However, this causes the read function to run twice.  I can minimize this effect by checking to see if the page is already 1, but any time the dataSource.page method is called, the read function runs twice.  I do not want to cause the load on our API to be greater than necessary.  I have tried just changing the options so that the calls to the API are correct, but this causes the pager to give odd numbers such as "250 - 4 of 4 items".  Is there any way to stop this from happening and allow the pager to be correct?  

    My current read function is as follows:

    read: function (options) {
        var filtersChanged = IsFilterChanged();  // method to do compare on external filters
        if (filtersChanged) {
            if (vm.gridOptions.dataSource.page() != 1) {
               vm.gridOptions.dataSource.page(1);
            }
            options.data.page = 1;
            options.data.skip = 0;
        }
        var params = {
            count: options.data.take,
            offset: options.data.skip
        };
        if (vm.selectedFilters.myOption) {
            params.optionID = vm.selectedFilters.myOption;
        }
        // ...
        myService.availableItems.get(
            params,
            function (data) {
                options.success(data);
            },
            function (error) {
                // do something
            });
    },

    The view is as follows:

    <kendo-grid id="myItems" options="vm.gridOptions"
                k-ng-delay="vm.selectedFilters"
                k-rebind="vm.selectedFilters" >
    </kendo-grid>

    Thanks!

  2. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 23 Aug Link to this post

    Hello Christy,

    Indeed, you should not call the DataSource API from within the transport.read function as this will again call the transport.read.

    An approach you could try is to handle the change event of the filter input instead using the k-rebind attribute and to manually reset the page index using the DataSource page method.

    Regards,
    Rosen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
  3. Kendo UI is VS 2017 Ready
  4. Christy
    Christy avatar
    38 posts
    Member since:
    May 2016

    Posted 23 Aug in reply to Rosen Link to this post

    If I don't use the transport.read function to call the DataSource API, how will the code know to run? I tried putting the code into the $onChanges event, but it is never called when the k-rebind is used.  

    If I remove the API call from the read, how does the code know what to set for the count and offset parameters I need to pass to my API?  Is there a way to get the options parameter used by transport.read?

    Finally, if I remove the API call from the read and I use the pager or sort on the grid, how will the transport.read know what to do?

    Do you have any examples on how to set this up?

    Thanks!

     

  5. Rosen
    Admin
    Rosen avatar
    3234 posts

    Posted 24 Aug Link to this post

    Hello Christy,

    Yes, you should keep the transport.read implementation. What I meant is just not use the k-bind attribute to rebind the Grid when filters are changed. Here is a basic test page to illustrate the approach in question.

    Regards,
    Rosen
    Telerik by Progress
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
     
Back to Top
Kendo UI is VS 2017 Ready