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

Cancel ongoing ajax filter request and start new one

9 Answers 140 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Victor
Top achievements
Rank 1
Victor asked on 29 May 2013, 08:19 AM
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

9 Answers, 1 is accepted

Sort by
0
Petur Subev
Telerik team
answered on 31 May 2013, 07:54 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 31 May 2013, 07:41 PM
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
0
Petur Subev
Telerik team
answered on 04 Jun 2013, 01:19 PM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 04 Jun 2013, 02:11 PM
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
0
Petur Subev
Telerik team
answered on 06 Jun 2013, 09:12 AM
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
Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
0
Victor
Top achievements
Rank 1
answered on 06 Jun 2013, 11:22 AM
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
0
Heiko Falk
Top achievements
Rank 1
answered on 27 Aug 2013, 07:54 AM
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


0
Kendo Dude
Top achievements
Rank 2
answered on 22 Mar 2018, 09:03 PM

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;
});
0
Stefan
Telerik team
answered on 26 Mar 2018, 06:25 AM
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
Try our brand new, jQuery-free Angular 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
Victor
Top achievements
Rank 1
Answers by
Petur Subev
Telerik team
Victor
Top achievements
Rank 1
Heiko Falk
Top achievements
Rank 1
Kendo Dude
Top achievements
Rank 2
Stefan
Telerik team
Share this question
or