jQuery Grid Plugin - jqGrid - Topic: This time using dialog: autocomplete drop down renders behind jqgird form http://www.trirand.com/blog/?page_id=393/bugs/this-time-using-dialog-autocomplete-drop-down-renders-behind-jqgird-form Simple:Press Version 5.7.5.3 efrenba2013 on This time using dialog: autocomplete drop down renders behind jqgird form http://www.trirand.com/blog/?page_id=393/bugs/this-time-using-dialog-autocomplete-drop-down-renders-behind-jqgird-form#p29451 Bugs http://www.trirand.com/blog/?page_id=393/bugs/this-time-using-dialog-autocomplete-drop-down-renders-behind-jqgird-form#p29451 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:

var frmDefaults =
        {
            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);
            }
        };

]]> Tue, 10 Sep 2013 05:39:47 +0300 efrenba2013 on This time using dialog: autocomplete drop down renders behind jqgird form http://www.trirand.com/blog/?page_id=393/bugs/this-time-using-dialog-autocomplete-drop-down-renders-behind-jqgird-form#p29447 Bugs http://www.trirand.com/blog/?page_id=393/bugs/this-time-using-dialog-autocomplete-drop-down-renders-behind-jqgird-form#p29447 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/jqUI/redmond/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<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>

]]> Sun, 08 Sep 2013 21:27:26 +0300