Cancel ongoing ajax filter request and start new one

10 posts, 0 answers
  1. Victor
    Victor avatar
    167 posts
    Member since:
    Nov 2010

    Posted 29 May 2013 Link to this post

    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
  2. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 31 May 2013 Link to this post

    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!
  3. Victor
    Victor avatar
    167 posts
    Member since:
    Nov 2010

    Posted 31 May 2013 Link to this post

    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
  4. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 04 Jun 2013 Link to this post

    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!
  5. Victor
    Victor avatar
    167 posts
    Member since:
    Nov 2010

    Posted 04 Jun 2013 Link to this post

    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
  6. Petur Subev
    Admin
    Petur Subev avatar
    1882 posts

    Posted 06 Jun 2013 Link to this post

    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!
  7. Victor
    Victor avatar
    167 posts
    Member since:
    Nov 2010

    Posted 06 Jun 2013 Link to this post

    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
  8. Heiko Falk
    Heiko Falk avatar
    11 posts
    Member since:
    Sep 2009

    Posted 27 Aug 2013 Link to this post

    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


  9. Kendo Dude
    Kendo Dude avatar
    5 posts
    Member since:
    Dec 2017

    Posted 22 Mar 2018 Link to this post

    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;
    });
  10. Stefan
    Admin
    Stefan avatar
    2913 posts

    Posted 26 Mar 2018 Link to this post

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