jqgrid autocomplete visible behind edit form

Question

Hello ,

I am trying to implement jqgrid with autocomplete in one of its column. But I have very strange problem, auto-complete list is shown below the jqgird edit form.

I have included following jquery js file.

1. jquery-ui-1.10.4.custom.min.js
2. jquery.ui.core.js
3. jquery.ui.widget.js
4. jquery.ui.position.js
5. jquery.ui.menu.js
6. jquery.ui.autocomplete.js

following jqgrid js file.

1. grid.locale-en.js
2. jquery.jqGrid.min.js
3. grid.common.js
4. jqModal.js
5. jqDnR.js
6. grid.formedit.js

Following jqgrid css file.

1. ui.jqgrid.css

Following jquery css file.

1. jquery-ui-1.10.4.custom.css
2. demos.css
3. jquery.ui.all.css

Following code to implement jqgrid colModel.

 colNames:['Id', 'First Name', 'Last Name'],
 colModel:[
       {name:'id',index:'id', width:55,editable:false,editoptions:readonly:true,size:10},hidden:true},
       {name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
           editoptions: {
                dataInit: function (elem) {
                    myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
                }
         }},
       {name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
          ],

Below is my entire jqgrid code.

var jq = jQuery.noConflict();

jq(function() {
      jq("#grid").jqGrid({
          url:'${pageContext.servletContext.contextPath}/grid/load.action',
       datatype: 'json',
       mtype: 'GET',
          colNames:['Id', 'First Name', 'Last Name'],
          colModel:[
           {name:'id',index:'id', width:55,editable:false,editoptions:{readonly:true,size:10},hidden:true},
           {name:'firstname',index:'lastname', width:100,editable:true,edittype:'text',
               editoptions: {
                    dataInit: function (elem) {
                        myAutocomplete(elem, "${pageContext.servletContext.contextPath}/grid/autocomplete.action");
                    }                  
           }},
           {name:'lastname',index:'firstname', width:100,editable:true, editrules:{required:true}, editoptions:{size:10}}
          ],
          postData: {
       },
          rowNum:20,
          rowList:[20,40,60],
          height: 200,
          autowidth: true,
          rownumbers: true,
          pager: '#pager',
          sortname: 'id',
          viewrecords: true,
          sortorder: "asc",
          caption:"Users",
          emptyrecords: "Empty records",
          loadonce: false,
          editurl:'${pageContext.servletContext.contextPath}/grid/edit.action',
          loadError : function(xhr,st,err) { 
              console.log('display error : '+err);  
              jq("#rsperror").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);

          },
          loadComplete: function() {
       },
          jsonReader : {
              root: "rows",
              page: "page",
              total: "total",
              records: "records",
              repeatitems: false,
              cell: "cell",
              id: "id"
          }
      });
      jq("#grid").jqGrid('navGrid','#pager',
        {edit:true,add:true,del:true,search:true},
        { },
              { },
              { },
        {
            sopt:['eq', 'ne', 'lt', 'gt', 'cn', 'bw', 'ew'],
               closeOnEscape: true,
                multipleSearch: true,
                 closeAfterSearch: true }
      );     
     });

Here autocomplete works fine, it lists all the username but it shows behind the editForm on jqgrid. Please suggest a solution.

Thanks & Regards,

Kartik Jajal

Answer 1

I have solved the problem by setting the z-index property of .ui-front like below .ui-front { z-index: 1000; } in jquery ui css