Forum
Log In
Home
Topic RSS
21:27
08/09/2013
Offline
Hi there,
I have problems with autocomplete when the grid is over a dialog. The solution posted here (http://www.trirand.com/blog/?p.....gird-form/) doesn't work in this scenario.
Any idea about it?
thanx in advance.
Here, a test case. You must uncomment the dialog lines to see the bug i'm talking about.
<link href="css/jqGrid/ui.jqgrid.css" rel="stylesheet" type="text/css" />
<style type="text/css">
.ui-front { z-index:1000 }
</style>
<script src="js/jquery.min.js" language="javascript"></script>
<script src="js/jquery-ui.custom.js" language="javascript"></script>
<script src="js/jqGrid/i18n/grid.locale-es.js" language="javascript"></script>
<script type="text/javascript">
jQuery.jgrid.no_legacy_api = true;
</script>
<script src="js/jqGrid/jquery.jqGrid.js" language="javascript"></script>
<script language="javascript">
var dataStr =
'{'+
' "page":"1",'+
' "total":2,'+
' "records":"1",'+
' "rows":['+
' {"invid":"12345","name":"Desktop Computers"}'+
' ]'+
'}';
$(document).ready(function(){
$("#list").jqGrid({
datatype: 'jsonstring',
datastr : dataStr,
colNames:['Inv No','Name'],
colModel :[
{name:'invid', index:'invid', width:55, sorttype:'int'},
{name:'name',label:'name', width:150,editable: true}
],
pager: '#pager',
rowNum:10,
viewrecords: true,
caption: 'My first grid'
});
var frmDefaults =
{
width: 380,
resize: false,
modal: true,
url: "none",
beforeShowForm: function()
{
$("#name").autocomplete(
{
source:["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
minLength:1
});
//$(".ui-autocomplete").css("zIndex", 1000);
}
};
$("#btn_add").button().click(function()
{
$("#list").jqGrid("editGridRow", "new", frmDefaults);
});
//$("#jqgrid").dialog({autoOpen:false, closeOnEscape:true, draggable:true, resizable:false,
// width:600, height:300, position:"center"});
//$("#jqgrid").dialog("open");
});
</script>
</head>
<body>
<div id="jqgrid">
<table id="list"></table>
<div id="gridpager"></div>
<button id="btn_add">Add New</button>
</div>
</body>
05:39
08/09/2013
Offline
After struggling for a several days, at last i found a solution.
If ui-autocomplete plugin is created from beforeShowForm function this is append to the dialog instead of the add/edit jqGrid form because the form doesn't exist yet, moving the plugin to afterShowForm seems to works ok.
Any way i still wondering why z-index=1000 of .ui-autocomplete didn't work.
code fixed:
{
width: 380,
resize: false,
modal: true,
url: "none",
beforeShowForm: function()
{
//
},
afterShowForm: function(formid, oper)
{
$("#name").autocomplete(
{
source:["c++", "java", "php", "coldfusion", "javascript", "asp", "ruby"],
minLength:1
});
$(".ui-autocomplete").css("zIndex", parseInt($("[style*=z-index]:last").css("zIndex"), 10) + 2);
}
};
Most Users Ever Online: 715
Currently Online:
48 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
