free jqgrid 4.8 overlay issue when jqgrid inside m

Question

I use free jqgrid 4.8. I use the jqgrid inside a modal dialog. When I try to use the delete button of the pager, all the dialogs are disabled.

http://jsfiddle.net/9ezy09ep

$(function ()
{
    $("#Ecran").dialog(
    {
        dialogClass: 'Ecran',
        autoOpen: false,
        width: 500,
        height:400,
        modal: true,
        open: function (event, ui) {
            $("#jqGrid").jqGrid({
                url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
                mtype: "GET",
                datatype: "jsonp",
                colModel: [
                    { label: 'OrderID', name: 'OrderID', key: true, width: 75 },
                    { label: 'Customer ID', name: 'CustomerID', width: 150 },
                    { label: 'Order Date', name: 'OrderDate', width: 150 },
                    { label: 'Freight', name: 'Freight', width: 150 },
                    { label:'Ship Name', name: 'ShipName', width: 150 }
                ],
                viewrecords: true,
                width: 480,
                height: 250,
                rowNum: 20,
                pager: "#jqGridPager"
            });

            jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
                del: true, add: false, edit: false,
                beforeRefresh: function () {},
                afterRefresh: function () {}},                  
                {}, // default settings for edit
                {}, // default settings for add
                {}, // delete
                {}, // search options
                {}
            );

        },
        close:function () {}
    });
});

Any ideas ? thanks

Answer 1

jqGrid should utilize ui-dialog class when it creates modal dialog.

you will have to modify jquery.jqGrid.min.js file.

As per version 5.0.0 ,

Just add ui-dialog class to follwing line,

modal: { modal: "ui-widget ui-widget-content ui-corner-all ",          

e.g.

modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",

As per free jqGrid version,

Add ui-dialog class to following line,

 dialog: {
                ...
                window: "ui-widget ui-widget-content ui-corner-all ui-front",
                ...

e.g.

 dialog: {
                ...
                window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
                ...

Answer 2

I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.

I recommend you to include the line

$.fn.jqm = false;

to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.

UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like

$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});

to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/