Question

Pretty straight forward here for those who have used jqGrid with form editing, the jqGrid overlay to make the form edit dialog appear modal is using a ‘.jqmOverlay’ instead of the themed ‘.ui-widget-overlay’ for jquery.

I have attempted in afterShowForm event to remove the jqmOverlay and replace it with the ui-widget-overlay but the correct overlay (ui-widget-overlay) appears for a second before it reverts back to the incorrect (jqmOverlay).

It doesn’t appear that there are any later events that happend that I could try firing off of unless I am mistaken.

Any help would be appreciated.

afterShowForm: function (form)
    {
        var overlayDiv = $('.jqmOverlay');
        overlayDiv.removeAttr('class');
        overlayDiv.attr('class', 'ui-widget-overlay');
        //$('.jqmOverlay').attr('class', 'ui-widget-overlay');                       

    }

Answer 1

The form editing supports two different overlays: the standard 'ui-widget-overlay' and jqModal from jqModal.js.

If you don’t want use jqModal plugin you can include jqModal:false property in the list of option of Add or Edit settings. In the case the overlay will be the following:

<div style="display: block;" id="lui_list" class="ui-widget-overlay jqgrid-overlay"/>

(here war used the grid where the <table> element has id=”list”)

If you want remove the overlay you can hide it with respect of

afterShowForm:function(){
    $("#lui_"+grid[0].id).hide(); // hide #lui_list overlay
}

where grid is defined like var grid=$("list");

UPDATED: If you want you can hide the overlay of the grid like I described before and create your own overlay having the class ‘ui-widget-overlay’. I created the demo, which works in my tests without the problem which you describe. I used the following options of the Edit dialog:

recreateForm:true,
jqModal:false,
reloadAfterSubmit:false,
savekey: [true,13],
closeOnEscape:true,
closeAfterEdit:true,
afterShowForm:function(){
    $("#lui_"+grid[0].id).hide();
    $('body').prepend('<div class="ui-widget-overlay" id="My_list" style="left: 0px; top: 0px; width: 100%; height: 100%; position: fixed; z-index: 949; opacity: 0.3;"/>');
},
onClose:function(){
    $('#My_list').remove();
}

Probably you should change the value of opacity or z-index to use it better in your application. Be careful with the setting of z-index. If you need increase it you can probably need to use additional value of the zIndex of the Edit properties.