jqgrid 4.8 inside dialog delete row issue

HTML

<script src="http://code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.8.0/css/ui.jqgrid.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/free-jqgrid/4.12.1/js/jquery.jqgrid.min.js"></script>
<div id="Ecran">
	<table id="jqGrid"></table>
	<div id="jqGridPager" ></div>
</div>

JavaScript

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();
        });