jqGrid jQueryUI - Custom dialog message showing up behind grid

I have a custom button in a grid that displays another grid (modal style). I'm trying to make a custom error message on the second grid but when the error occurs, the error dialog shows up behind the grid:

I guess only the code of the second grid is relevant.. here it goes:

var data = $("#grid").jqGrid('getGridParam','selrow');
if(!data) {
    $.jgrid.info_dialog($.jgrid.errors.errcap,$.jgrid.nav.alerttext,$.jgrid.edit.bClose);
}
else {
    ...
    ...
}

Answers

You will need to change the z-index of the modal dialog created by jqGrid. Having a jqGrid inside of a jQuery UI div can cause some display issues (specifically with the error dialogs and search dialogs). To fix the issue of the error message showing up behind the dialog the grid is in, you can use $('#info_dialog').css('z-index', '10000');.

Need Your Help