free jqgrid 4.8 overlay issue when jqgrid inside modal dialog

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

Solution

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/