Forum



17:53

04/04/2013

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>
Most Users Ever Online: 715
Currently Online:
67 Guest(s)
Currently Browsing this Page:
1 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66