jqGrid trigger "Loading..." overlay

Question

Does anyone know how to trigger the stock jqGrid "Loading..." overlay that gets displayed when the grid is loading? I know that I can use a jquery plugin without much effort but I'd like to be able to keep the look-n-feel of my application consistent with that of what is already used in jqGrid.

The closes thing I've found is this:

jqGrid display default "loading" message when updating a table / on custom update

• n8

Beatrisbeatrisa

Answer 1

If you are searching for something like DisplayLoadingMessage() function. It does not exist in jqGrid. You can only set the loadui option of jqGrid to enable (default), disable or block. I personally prefer block. (see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:options). But I think it is not what you wanted.

The only thing which you can do, if you like the "Loading..." message from jqGrid, is to make the same one. I'll explain here what jqGrid does to display this message: Two hidden divs will be created. If you have a grid with id=list, this divs will look like following:

<div style="display: none" id="lui_list"
     class="ui-widget-overlay jqgrid-overlay"></div>
<div style="display: none" id="load_list"
     class="loading ui-state-default ui-state-active">Loading...</div>

where the text "Loading..." or "Lädt..." (in German) comes from $.jgrid.defaults.loadtext. The ids of divs will be constructed from the "lui_" or "load_" prefix and grid id ("list"). Before sending ajax request jqGrid makes one or two of this divs visible. It calls jQuery.show() function for the second div (id="load_list") if loadui option is enable. If loadui option is block, however, then both divs (id="lui_list" and id="load_list") will be shown with respect of .show() function. After the end of ajax request .hide() jQuery function will be called for one or two divs. It's all.

You will find the definition of all css classes in ui.jqgrid.css or jquery-ui-1.8.custom.css.

Now you have enough information to reproduce jqGrid "Loading..." message, but if I were you I would think one more time whether you really want to do this or whether the jQuery blockUI plugin is better for your goals.

Grouse

Thanks for the detailed response! Wow, the Options link you provided really gives me access to the underbelly of the jqGrid beast which, sadly, I was completely unaware of until now. I've found the jqGrid documentation to be a bit counter-intuitive and hard to follow but I'm warming up to it. There's a bit of a learning curve involved. I'll play around with the "load_list" div to see if I can get it to play nice. I may end up resorting to the jQuery BlockUI as prescribed. But at least I feel like I have options (no pun intended) now. – Beatrisbeatrisa

It didn't take me much time to figure out that all I needed to do to achieve my goal was the following: $("#load_list").show(); $("#load_list").css("z-index", 1000); and $("#load_list").hide(); $("#load_list").css("z-index", 101); I had to change and restort the z-index to display the div over my custom dialog box. Just thought I'd share. – Beatrisbeatrisa

Answer 2

I use

        $('.loading').show();
        $('.loading').hide();

It works fine without creating any new divs

Dolorous

Answer 3

Simple, to show it:

$("#myGrid").closest(".ui-jqgrid").find('.loading').show();

Then to hide it again

$("#myGrid").closest(".ui-jqgrid").find('.loading').hide();

Pellucid

Please pay attention when posting to an old thread which has several other responses, especially when one of them is accepted. You need to explain why your answer is better than all the existing ones. – Sketch

Thanks!! this answer is better than the other ones because (1) it is very short, and (2) it handles the case of two grid on the same page. – Jarret

Answer 4

I just placed below line in onSelectRow event of JQ grid it worked.

$('.loading').show();

Disorient

Answer 5

The style to override is [.ui-jqgrid .loading].

Demonetize

This only applies to the "Loading..." in the middle of the grid though, not the window overlay that blocks access to the grid whilst loading – Saeger

Answer 6

You can call $("#load_").show() and .hide() where is the id of your grid.

Trimolecular

Answer 7

its is worling with $('div.loading').show(); This is also useful even other components

$('#editDiv').dialog({
            modal : true,
            width : 'auto',
            height : 'auto',
            buttons : {
                Ok : function() {
                    //Call Action to read wo and 
                     **$('div.loading').show();**

                    var status = call(...)
                    if(status){
                        $.ajax({
                            type : "POST",
                            url : "./test",
                            data : {
                                ...
                            },
                            async : false,
                            success : function(data) {

                                retVal = true;
                            },
                            error : function(xhr, status) {


                                retVal = false;
                            }
                        });
                    }
                    if (retVal == true) {
                        retVal = true;
                        $(this).dialog('close');
                    }
                    **$('div.loading').hide();**
                },
                Cancel : function() {
                    retVal = false;
                    $(this).dialog('close');
                }

            }
        });

Wound

Answer 8

As mentioned by @Oleg the jQuery Block UI have lots of good features during developing an ajax base applications. With it you can block whole UI or a specific element called element Block

For the jqGrid you can put your grid in a div (sampleGrid) and then block the grid as:

$.extend($.jgrid.defaults, {
    ajaxGridOptions : {
        beforeSend: function(xhr) {
            $("#sampleGrid").block();
        },
        complete: function(xhr) {
            $("#sampleGrid").unblock();
        },
        error: function(jqXHR, textStatus, errorThrown) {
            $("#sampleGrid").unblock();
        }
    }
});

Smite

Answer 9

If you want to not block and not make use of the builtin ajax call to get the data

datatype="local"

you can extend the jqgrid functions like so:

$.jgrid.extend({
    // Loading function
    loading: function (show) {
        if (show === undefined) {
            show = true;
        }
        // All elements of the jQuery object
        this.each(function () {
            if (!this.grid) return;
            // Find the main parent container at level 4
            // and display the loading element
            $(this).parents().eq(3).find(".loading").toggle(show);
        });
        return show;
    }
});

and then simple call

$("#myGrid").loading(); 

or

$("#myGrid").loading(true); 

to show loading on all your grids (of course changing the grid id per grid) or

$("#myGrid").loading(false); 

to hide the loading element, targeting specific grid in case you have multiple grids on the same page

Unbelievable

Answer 10

In my issues I used

$('.jsgrid-load-panel').hide()

Then

$('.jsgrid-load-panel').show()

Mull

This is for jsGrid and not for jqGrid, which is quite different. Please consider (re)moving – Archi