views:

1196

answers:

1

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:

http://stackoverflow.com/questions/2614643/jqgrid-display-default-loading-message-when-updating-a-table-on-custom-update

  • n8
+1  A: 

If you are searching for something like DisplayLoadingMessage() function. It is not exist in jqGrid. You can only set 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 "Loading..." message from jqGrid, is to make the same one. I explain what do jqGrid to display this message. Two hidden divs will be created. If you have a grid with id=list, this divs will be 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) come from $.jgrid.defaults.loadtext. The ids of divs will be constructed from "lui_" or "load_" prefix and grid id ("list"). Before sending ajax request jqGrid makes one or two of this divs visible. It call jQuery .show() function for the second div (id="load_list") if loadui option is enable. If loadui option is block 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.

Definition of all classes you will find in ui.jqgrid.css or jquery-ui-1.8.custom.css.

Now you have enough information to reproduce jqGrid "Loading..." message, but think one more time whether you really want to do this or the usage of jQuery blockUI plugin ( http://malsup.com/jquery/block/) is better for your goals.

Oleg
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.
gurun8
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.
gurun8