jQuery Grid Plugin - jqGrid - Topic: JQgrid within JqueryUI dialog -- Find Records goes behind dialog http://www.trirand.com/blog/?page_id=393/help/jqgrid-within-jqueryui-dialog-find-records-goes-behind-dialog Simple:Press Version 5.7.5.3 soquestion on JQgrid within JqueryUI dialog -- Find Records goes behind dialog http://www.trirand.com/blog/?page_id=393/help/jqgrid-within-jqueryui-dialog-find-records-goes-behind-dialog#p28582 Help http://www.trirand.com/blog/?page_id=393/help/jqgrid-within-jqueryui-dialog-find-records-goes-behind-dialog#p28582 The code below uses JQgrid within a JqueryUI dialog. When the 'Find Records' button is pressed first time, filter form appears fine in front of the grid. Close the filter, fine. Open the filter, fine, close it fine.

But the 3rd time press Find Records' button, the filter form appears behind the dialog form. Any ideas as to cause/solution — so that the filter form always appears in front of the grid and the dialog? Thanks…

(and… I do need the dialog to _NOT_ be Modal)

—

<!doctype html>
<html lang="en">
<head> 
<meta charset="utf-8″> 
<title>tabs demo</title> 

<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"> 
<script src="http://code.jquery.com/jquery-1.9.1.js%22%3E%3C/script"></script>

<!– <script src="js/jquery-1.9.0.min.js" type="text/javascript"></script> –>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8″ />
<title>My First Grid</title>

<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />

</head>

<body>
<button id="opener">open the dialog</button>
<div id="dialog" title="My Test">
    <table id="MyGrid"></table>
    <div id="MyGridDiv" MyGrid>
    </div>
</div>      

<script>
$( "#dialog" ).dialog({ autoOpen: false});
$( "#opener" ).click(function() { 
$( "#dialog" ).dialog( "open" );});
</script>

<script>
jQuery("#MyGrid").jqGrid({
datatype: "local",
height: 250,
colNames:['Inv No','Date', 'Client', 'Amount','Tax','Total','Notes'],
colModel:[
{name:'id',index:'id', width:60, sorttype:"int"},
{name:'invdate',index:'invdate', width:90, sorttype:"date"},
{name:'name',index:'name', width:100},
{name:'amount',index:'amount', width:80, align:"right",sorttype:"float"},
{name:'tax',index:'tax', width:80, align:"right",sorttype:"float"},    
{name:'total',index:'total', width:80,align:"right",sorttype:"float"},     
{name:'note',index:'note', width:150, sortable:false}      
],
multiselect: true,
pager: '#MyGridDiv',  <!– required for search dialog –>
caption: "Test"
});
var mydata = [
{id:"1",invdate:"2007-10-                01",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"2",invdate:"2007-10-02",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"3",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"4",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"5",invdate:"2007-10-05",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"6",invdate:"2007-09-06",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"},
{id:"7",invdate:"2007-10-04",name:"test",note:"note",amount:"200.00",tax:"10.00",total:"210.00"},
{id:"8",invdate:"2007-10-03",name:"test2",note:"note2",amount:"300.00",tax:"20.00",total:"320.00"},
{id:"9",invdate:"2007-09-01",name:"test3",note:"note3",amount:"400.00",tax:"30.00",total:"430.00"}
];
for(var i=0;i<=mydata.length;i++)
jQuery("#MyGrid").jqGrid('addRowData',i+1,mydata[i]);

<!– Search options–>             
jQuery("#MyGrid").jqGrid('navGrid','#MyGridDiv',
{
del:false,add:false,edit:false},{},{},{},{multipleSearch:true}
);

</script>
</body>
</html>

]]> Thu, 04 Apr 2013 17:53:06 +0300