Syncing pager with grid causes 2 service calls

[Christy]

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!

[Rosen]

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

 

 

[Christy]

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!

 

[Rosen]

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