jQuery Grid Plugin - jqGrid

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}}
          ],


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