jqGrid trigger “Loading…” overlay

by

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.

More Related Contents:

  1. Stopping columns resizable in jqgrid
  2. Adding a CSS class to a column
  3. how to persist current row in jqgrid
  4. Browser Memory Usage Comparison: inline onClick vs. using JQuery .bind()
  5. jqgrid: how to set toolbar options based on column value in row selected
  6. Unable to position pager (navigation bar) above jqGrid
  7. Jqgrid: navigation based on the selected row
  8. JqGrid with autocompletion cant parse data from controller to view
  9. jqGrid client-side searching
  10. Add toolbar in the bottom of the header using jqgrid
  11. Custom jQGrid post action
  12. postData not passing any parameters!
  13. Jqgrid Tree View Adjacencey
  14. JQgrid checkbox onclick update database
  15. jqgrid dynamic columns and data by json [duplicate]
  16. Hide expand/collapse symbol or deactivate spec. rows in jqGrid subgrid
  17. jqGrid implementing of custom cell: integration of raty-plugin
  18. JQGrid Programmatically Select Grid Row
  19. jqGrid need a field editable on Add dialog but not Edit dialog
  20. Real-time data in a grid – better method
  21. JQGrid – How Can We make an Custom Row Detail
  22. highlight error cell or input when validation fails in jqgrid
  23. jqGrid – format ratio field as percent value
  24. Is it possible to modify the colModel after data has loaded with jqgrid?
  25. jqGrid – How to modify form_editing construction?
  26. Filtering jqGrid datetime columns using date picker just on date
  27. jqGrid Subgrid with “local” Data
  28. jqGrid Pager Area – Using Font Awesome Icons
  29. jqGrid DatePicker filtering without hitting Enter key
  30. How to delete rows with local data in jqgrid

Leave a Comment