CODEWITHSUNDEEP
javascriptjqueryjqgrid
Scruffy The Janitor
Scruffy The Janitor

Reputation: 472

jqGrid - Form Edit Overlay not the same as Theme

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');                       

    }

Upvotes: 2

Views: 1483

Answers (1)

Oleg
Oleg

Reputation: 221997

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.

Upvotes: 3

Related Questions