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

Question

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.

loa

Answer 1

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.