Cancel ongoing ajax filter request and start new one

[Victor]

Hi!

We have implemented some custom filtering and use the grid.dataSource.filter(...) method to request new data via ajax. Normally everything works well. However, a common scenario is that the user first selects one filter and then (before the ajax result is back) selects another. When the user selects the new filter we would like to cancel the ongoing request and send a new one - is that possible?

Also - is it possible to manually trigger the first request and not have the grid auto-request data?


Thanks in advance
Victor Ström

[Petur Subev]

Hello Victor,

I am afraid it is not possible to cancel the request that the Grid has performed. There is one possible way if you are using pure JavaScript (without using the HtmlHelper to initialize the Grid) and you specify the transport CRUD operations as functions and you perform the request manually with $.ajax.

http://docs.kendoui.com/api/framework/datasource#configuration-transport.read

Regarding the initial binding you can disable it with the AutoBind options of the Grid.

Kind Regards,
Petur Subev
Telerik

[Victor]

I see, thank you for the reply. Even if not adding the ability to cancel an ongoing request is possible it would be very nice if you could look over the progress indicator when user sets a new filter before the current request has returned. In our testing this happens:

Scenario: Grid with filter
1. Filter [name = a]
2. Request [name = a] is sent
3. Filter [name = b]
3. Filter [name = c]
4. Return [name = a]
5. Grid is updated with [name = a] and loading indicator disappears
6. Request [name = c] is sent
5. Grid does not show loading indicator <--- loading indicator is expected
6. Return [name = c]
7. Grid is in correct state

And thanks for the Autobind information, we will certainly use that!


/Victor Ström

[Petur Subev]

Hello Victor,

I am not able to reproduce such behavior. On my side the Grid is disabled while it is loading data from the server and you cannot sort/filter/group or edit any of the records.

Regards,
Petur Subev
Telerik

[Victor]

Hi again,
I should have clarified - this behaviour can be seen when using custom filter buttons calling the grid.dataSource.filter(...) function when the first filter() request is loading.

Thanks
/Victor

[Petur Subev]

Hello Victor,

You can consider disabling your filtering inputs so the users cant select until the request has finished, since as I mentioned Ajax requests performed by the dataSource could not be canceled.

Kind Regards,
Petur Subev
Telerik

[Victor]

Hi again and thanks for the reply.

We don't want to disable the filter buttons since we feel that would slow down the user's experience even with the current behaviour, but thanks for the suggestion.

If possible we still think it would be nice if the grid showed the loading indicator for the second request as well (since there actually is a load pending), but if you choose not to change this I suppose we will have to do with the current behaviour.

Intercepting the ajax call and controlling everything ourselves would of course be an option (we have done that for one grid where we rely on a local, synced, datasource), but in our experience that requires quite a lot of work for each grid and not something we are prepared to do at the moment since we use quite a few grids across the applications.


Thanks again for the answers
/Victor

[Heiko Falk]

Hey guys,
I just discovered this thread and I have to disagree with Peter. With jQuery.ajaxPreFilter it is possible to cancel an outgoing request, but only if it hasn't been send to the server yet.

var currentRequests = {};

$.ajaxPrefilter(function (ajaxSettings, originalAjaxSettings, jqXHR) {
    /// <param name='ajaxSettings' value='jQuery.ajaxSettings'></param>
    /// <param name='originalAjaxSettings' value='jQuery.ajaxSettings'></param>
    /// <param name='jqXHR' value='jQuery.ajax()'></param>

    // Replace /ControllerName/ActionName with your desired URL
    if (ajaxSettings.url.indexOf('/ControllerName/ActionName') > 0) {
        jqXHR.done(function () {
            delete currentRequests[ajaxSettings.url];
        })

        // If there's already an request running under that URL then abort the new one
        if (currentRequests[ajaxSettings.url]) {
            jqXHR.abort();
        }

        currentRequests[ajaxSettings.url] = jqXHR;
    }
});

Regards
Heiko

[Kendo Dude]

I know this thread is old but it recenlty solved my issues with autocomplete and multiple remote requests returning slowly.

The example directly from JQuery docs worked for me. (I removed the options.abortOnRetry check)

http://api.jquery.com/jquery.ajaxprefilter/

 

var currentRequests = {};

$.ajaxPrefilter(function( options, originalOptions, jqXHR ) {
   if ( currentRequests[ options.url ] ) {
         currentRequests[ options.url ].abort();
   }
  currentRequests[ options.url ] = jqXHR;
});

[Stefan]

Hello, Karl,

Thank you for sharing the solution with the Kendo UI community.

I added some Telerik points for sharing this.

It is very appreciated when sharing a solution with the community.

Regards,
Stefan
Progress Telerik