Show loading gif when grid methods are run

[jacobraccuiaParticipant]

I have a few methods for manipulating the grid display that take some time, so I’d like to show a loading gif. I’ve attempted to use $('#grid').jqxGrid('updating'); and it might be the right idea. The problem seems to be however, that the “show” the gif code isn’t triggered until after all grid manipulation takes place.

    $('#grid').on('click', '.reset', function() {
      $('.reset .fa-spinner').show();
        reset();
    });

function reset() {

    var groups = $.extend({}, $('#grid').jqxGrid('groups'));
    $.each(groups, function () {
        $('#grid').jqxGrid('removegroup', this); 
    });

    $('#grid').jqxGrid('addgroup', 'salesRegion');
    $('#grid').jqxGrid('collapseallgroups');

      function timeout() { 
        setTimeout(function() {
          var isupdating = $('#grid').jqxGrid('updating');
          console.log(isupdating);
          if(isupdating === false) {
            $('.reset .fa-spinner').hide();
          } else { timeout();}
        }, 10);
      }

      timeout();
}

Is there something I’m missing? It seems like the groups are removed before the gif shows, and then it flashes. As soon as I click the link, there is a delay.

Maybe there’s a much better way to do this?

[StanislavParticipant]

Hello jacobraccuia,

We already have an integrated loader for Grid. Here is the example:
http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxloader/index.htm#demos/jqxloader/javascript-loader-with-grid.htm

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[jacobraccuiaParticipant]

Thank you Stanislav.

You misunderstand my question, however. How do I trigger this loader to show whenever any methods are invoked on the grid?

[StanislavParticipant]

Hello jacobraccuia,

You can use the open method of the Loader, in the beginning, of every method.
$('#jqxLoader').jqxLoader('open');

Best Regards,
Stanislav

jQWidgets Team
http://www.jqwidgets.com/

[jacobraccuiaParticipant]

The Grid methods don’t have a callback (that i’m aware of) that will tell me when the method finishes so that I can call $('#jqxLoader').jqxLoader('close');

I need to know when they finish so I can hide the loader when it’s done!

[StanislavParticipant]

Hello jacobraccuia,

Use this method:
http://jsfiddle.net/jqwidgets/g7zEL/

Best Regards,
Stanislav
jQWidgets Team
http://www.jqwidgets.com/

[jacobraccuiaParticipant]

Thank you. At this point we’re kind of just walking in circles, I really appreciate your help, but it’s not what I’m looking for. I definitely now know how to show a loading gif on the site!

I want to know what event I can watch for that triggers when a Grid method is finished running // all grid methods have completed ( filtering, sorting, adding removing columns, etc )

[Peter StoevKeymaster]

Hi jacobraccuia,

Methods are synchronous So a method finishes after you call the method. In case you load data dynamically through AJAX, use the bindingcomplete event.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[jacobraccuiaParticipant]

If I run 10 of them at once they take over 5 seconds! Such as looping through all of the columns and showing / hiding them. I get that it’s async, but shouldn’t it return a “complete?”

[MayaParticipant]

Hi,
I’m used to place the following code in my binding complete event.
$(“#jqxgrid”).jqxLoader(‘close’);
But still now I can able to see the empty table for 1 second in my page after loader closed.

[TodorParticipant]

Hello Maya,

I would like to suggest you to use $('#jqxgrid').jqxGrid('showloadelement'); and $('#jqxgrid').jqxGrid('hideloadelement'); instead of jqxLoader.

Let us know if you need further assistance.

Best Regards,
Todor

jQWidgets Team
https://www.jqwidgets.com

[Author]

Posts