how to gray out jqgrid in save in inline edit in IE like Firefox does

If row is saved in inline edit in jqGrid, FireFox makes grid dim ( grayd out) during save operation.

Internet Explorer 9 does not change grid appearance.

loadui parameter is not used so it should have its default value (enabl开发者_运维技巧ed). If grid is refreshed, it is not grayed out in both browsers as expected. Gray out occurs during save in FireFox only.

How to gray out grid in save (if edit url is called) in Internet Explorer 9 also?

Update

Steps to reproduce:

1. Open http://trirand.com/blog/jqgrid/jqgrid.html
2. Select

Functionality (4.0) new

Formatter actions

1. Click in edit action button

2. Click in save action button

Observed:

In FireFox click in save button makes grid darker for a while In IE 9 click in save button does not change grid.

I analysed the problem. The reason is the line used in the inline editing:

async : false, //?!?

(the comment "?!?" is the original comment in jqGrid code). So in general the overlay which block the grid will be shown at the beginning of the jQuery.ajax request which save the row, but because of async : false the GUI of the web browser will be blocked till the completion. In the complete event handle the overlay will be hidden and the user can't see anything. All web browsers excepting Firefox don't show the overlay.

To fix the problem without changing of jqGrid code one can use ajaxRowOptions option of jqGrid. The option is documented not in the common list of jqGrid options, but at the end of the saveRow documentation. The usage of

ajaxRowOptions: { async: true }

as the jqGrid option or as the new default option

$.extend($.jgrid.defaults, {
    ajaxRowOptions: { async: true }
});

will solve the problem in case of inline editing.

In case of usage of 'actions' formatter another problem from the line exist

if ( $('#'+gid).jqGrid('saveRow',rid,  op.onSuccess,op.url, op.extraparam, saverow, op.onError,restorerow) ) {
    $("tr#"+rid+" div.ui-inline-edit, "+"tr#"+rid+" div.ui-inline-del","#"+gid+ ".ui-jqgrid-btable:first").show();
    $("tr#"+rid+" div.ui-inline-save, "+"tr#"+rid+" div.ui-inline-cancel","#"+gid+ ".ui-jqgrid-btable:first").hide();
}

one can see that here jqGrid use the saveRow as really as asynchronous function here. If you will use ajaxRowOptions: { async: true } you will have to make divs div.ui-inline-edit and div.ui-inline-del visible and hide div.ui-inline-save and div.ui-inline-cancel inside of your onSuccess event handler.

UPDATED: Sorry another code of - the saverow functions used as parameter of saveRow method do the same work. So I think all divs will be shown/hidden correctly without any additional code in your onSuccess event handler.