Incorrect Z-Order - the jqgrid Add/Edit screen shows up behind if you the grid is on a jquery ui dialog

Question

i have a jquery ui dialog and i have a jqgrid on that dialog. When i click Add or Edit, the jqgrid popup (to have a popup on a popup), it shows up to enter in the data BUT . .

. .it shows up behind the jquery UI dialog (the zorder is wrong). Is there anyway to have the jqgrid popup set the correct Zorder so this window shows on top of (in front of) the jquery ui dialog so this is usable.

I have a screenshot below highlighting the behavior.

here is my code:

  $(document).ready(function () {

    $("#modalDialogContainer").dialog({
    resizable: false,
    height: 'auto',
    autoOpen: false,
    width: 1000,
    modal: false,
    buttons: {
        'Close': function () {
            closeModalPopup();
        }
    }
});
}); 

then later on a button click to launch the jquery ui dialog i have this:

$("#modalDialogContainer").dialog("open");

i found this link which seems to be someone experiencing the same issue and at the end it says its fixed but i don't see this inthe jqgrid source code.

Answer 1

Z-index fixes the problem (as your comment mentions):

http://docs.jquery.com/UI/Dialog#option-zIndex

Answer 2

To solve your problem you can use zIndex option of "Add", "Edit" or "Del" which is not documented in the jqGrid documentation. Default value of zIndex is 950 For example you can use

$("#list").jqGrid('navGrid','#pager',{/*navGrid options*/},
                  {zIndex:1234}, // Edit options
                  {zIndex:1234}, // Add options
                  {zIndex:1234}, // Del options
                  {multipleSearch:true,overlay:false});

(default value of zIndex parameter of jQuery UI Dialog is 1000 so you should choose the higher value)