1

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 (enabled). 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.

Andrus
  • 26,339
  • 60
  • 204
  • 378
  • I couldn't reproduce your problem. On my test sites during saving of inline editing row the gray overlay will be set over the grid. The same behavior exist in IE9. – Oleg Sep 07 '11 at 15:51
  • @Oleg: Thank you. I updated question and provided steps to reproduce – Andrus Sep 07 '11 at 16:46
  • @Oleg: this demo page has also another issue: rapidly clicking in edit/save action buttons in multiple rows puts multiple rows into edit mode. In my application I have similar issue if multiselect is used which resets selection. How to fix this ? – Andrus Sep 07 '11 at 16:51

1 Answers1

2

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.

Oleg
  • 220,925
  • 34
  • 403
  • 798
  • I reproduced multiple rows in inline edit issue mentioned in comment and posted it with complete local testcase in http://stackoverflow.com/questions/7344937/how-to-prevent-multiple-rows-in-edit-mode-in-range-selection-single-click-edit-jq – Andrus Sep 08 '11 at 08:09