jqgrid 4.8 inside dialog delete row issue

HTML

<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/redmond/jquery-ui.css">
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="//rawgit.com/free-jqgrid/jqGrid/master/css/ui.jqgrid.css">
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/i18n/grid.locale-en.js"></script>
<script src="//rawgit.com/free-jqgrid/jqGrid/master/js/jquery.jqgrid.src.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<div id="Ecran">
	<table id="jqGrid"></table>
	<div id="jqGridPager"></div>
</div>

JavaScript

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

$("#Ecran").dialog({
    //dialogClass: 'Ecran',
    autoOpen: false,
    width: 560,
    height: 370,
    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 }
            ],
            cmTemplate: { width: 80, autoResizable: true },
            autoResizing: { compact: true },
            autoresizeOnLoad: true,
            height: "auto",
            viewrecords: true,
            rownumbers:true,
            //width: 480,
            height: "200",
            rowNum: 30,
            rowList:[5,10,20,30,35],
            pager: "#jqGridPager"
        }).jqGrid("navGrid", { del: true, add: false, edit: false });
    },
    close:function () {}
});
$("#Ecran").dialog("open");