Question

I have a jqGrid (4.1.1) using a simple subgrid. When a record is plus-ed out to view the subgrid, a loadui different from my normal one pops up.

My current configuration is to use loadui: none, and on the beforeRequest event I show my own loader.

If I use my custom one on the subGridBeforeExpand event, it shows my message as well as the default message. I also don’t see where I would hide my div when loading is complete. subGridRowExpanded doesn’t seem to be the right place.

In short:

1. Is there a jqGrid setting to hide the subgrid loadui, or do I have to roll my own javascript to hide it?
2. Which events can I hook into to make sure the subgrid is loaded so I can close my loader?

Thanks in advance!

Answer 1

If you look in the code of the subgrid you could find here the place where the the loading div will be displayed just as

$("#load_"+ts.p.id).show();

on the other side the code to show the standard (main) grid looks as the following (see here):

beginReq = function() {
    ts.grid.hDiv.loading = true;
    if(ts.p.hiddengrid) { return;}
    switch(ts.p.loadui) {
        case "disable":
            break;
        case "enable":
            $("#load_"+$.jgrid.jqID(ts.p.id)).show();
            break;
        case "block":
            $("#lui_"+$.jgrid.jqID(ts.p.id)).show();
            $("#load_"+$.jgrid.jqID(ts.p.id)).show();
            break;
    }
}

So you can see that the setting loadui: "disable" will be used only in the main grid. How you can see from the code above any value of loadui other as "enable" or "block" (like unknown “none” value which you use) will be interpret as the loadui: "disable".

In my view it is a bug in the subgrid.

As the workaround I suggest you just remove the loading div after creating of jqGrid. If the table element of your grid has id="list" for example, then the next line:

$("div#load_list").remove();

will just delete the div and you will never see it in both main grid and subgrid.

UPDATED based on the comments: OK! Now I understand your problem. I though before that you used datatype: 'local'. In case of the usage some remote datatype and blockUI plugin you can do the following. The ajax call used by jqGrid for the subgrid currently you can see here. It uses complete event, so the success and error events of the jQuery.ajax are free now. So you can use the events to call .unblock() or $.unblockUI() methods which will close the loading overlay. You can use ajaxSubgridOptions parameter of the jqGrid

$("#list").jqGrid({
    // options of grid of subgrid ...
    ajaxSubgridOptions {
        success: function () {
            $.unblockUI(); // or $("#list").unblock();
        },
        error: function () {
            $.unblockUI(); // or $("#list").unblock();
        }
    }
);

If it’s not solve your problem you should include in your question the code fragment which explains how you use blockUI plugin and I will modify the code by inserting the calls of unblocking methods.