free jqgrid 4.12 overlay issue when jqgrid inside modal dialog

Question

I use free jqgrid 4.12 and I use the jqgrid inside a modal dialog. When I select a row and click on the edit button, the edit dialog appear but I can't fill the field (it seems to be frozen).

Can you help me ?

http://jsfiddle.net/9ezy09ep/54/

function OuvrirEcran()
{
    $("#Ecran").dialog("open");
};

$(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, editable:true },
                    { 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: true}
            );

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

$(document).ready(function () {
   OuvrirEcran();
});

Answer 1

The reason of the problem is the lines of code jQuery UI inside of internal method _allowInteraction of jQuery UI dialog:

_allowInteraction: function( event ) {
    if ( $( event.target ).closest( ".ui-dialog" ).length ) {
        return true;
    }
    ...
}

It prevents interaction outside of any jQuery UI dialog.

I will include the following hack in free jqGrid code: I will add the lines

if ($(h.w[0].ownerDocument).data("ui-dialog-overlays")) {
    h.w.addClass("ui-dialog"); // hack to allow input inside of jQuery UI modal
}

after the line

h.w.css("z-index", z);

of $.jqm.open(). My tests shows that it fixes the problem.

I make some other changes in free jqGrid code now. Because of that I'll post the fix, which I described above, a little later. You can already text it using jquery.jqgrid.4.12.1-jquerui-modal-fix.src.js. You can test it on the demo http://jsfiddle.net/OlegKi/9ezy09ep/142/. Please use http and not https protocol in the JSFiddle, because I placed the fix on the server which don't support https.

Answer 2

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",
                ...