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.
Z-index fixes the problem (as your comment mentions):
http://docs.jquery.com/UI/Dialog#option-zIndex
To solve your problem you can use
zIndex
option of "Add", "Edit" or "Del" which is not documented in the jqGrid documentation. Default value ofzIndex
is 950 For example you can use(default value of
zIndex
parameter of jQuery UI Dialog is 1000 so you should choose the higher value)