jQuery Grid Plugin - jqGrid

Ok, probably something simple and stupid...

I have switched to 3.6.1, and since this was not wokring for me in 3.5 probably the error is not in it but...

I have a JQGRID that selects data from a URL, and I would like to search on it. I would like to use Integrated search toolbar but...

For some reason the searche fields are not showned on location, but UNDER the JQGRID.

$("#modal").dialog({ 			title:'Search item', 			bgiframe: true, 			modal: true,			 			autoOpen: false, 			 																															 							 							 							 							 			 			  			width: '61%'		//51% is for ICAT..IPACK  			 		}); 			 		gridimgpath = "../styles/images"; 		jQuery("#list2").jqGrid({ 			datatype: 'json', 			url: 'ItemTB.php?SearchId='+$("#itemNumber").val()+'&SearchDesc='+$("#description").val(),  //call index.php to fill the jQuery 			mtype: 'GET',    			cache: false, 			height: '350',     //table 			//search:true, 			//rowList:[10,20,30,40,50], 			 			colNames:['Item Number', 					  'Description', 					  'Code Stock', 					  'Price', 					  'Pack size', 					  						'Warehouse AA', 					  						'Warehouse ', 					  						'Warehouse ', 					  						'Warehouse ', 					  						'Warehouse ', 					  					   					  ], 			 			colModel:[ 				 {name:'ICAT',index:'ICAT', width:120,search:true,stype:'text', sortable:false}, 				 {name:'IDSCO',index:'IDSCO', width:280,search:true, sortable:false}, 				 {name:'ICS',index:'ICS', width:80,search:false, sortable:false}, 				 {name:'IPRC1',index:'IPRC1', width:90,align:"right",search:false, sortable:false}, 				 {name:'IPACK',index:'IPACK', width:70, sortable:false,search:false},  				  				  				 											{name:'IQTY1',index:'IQTY1', width:100,align:"right",search:false, sortable:false}, 									 											{name:'IQTY2',index:'IQTY2', width:100,align:"right",search:false, hidden:true, sortable:false}, 									 											{name:'IQTY3',index:'IQTY3', width:100,align:"right",search:false, hidden:true, sortable:false}, 									 											{name:'IQTY4',index:'IQTY4', width:100,align:"right",search:false, hidden:true, sortable:false}, 									 											{name:'IQTY5',index:'IQTY5', width:100,align:"right",search:false, hidden:true, sortable:false}, 									 				  				], 			 pager: jQuery('#pager2'), 			 imgpath: gridimgpath, 			 multiselect: false, 			gridview : true, 			 //toolbar : [true,"top"],  			 onSelectRow: function(id) { 				$("#itemNumber").val(id); 				$("#description").val($("#list2").getCell(id,"IDSCO")); 				$('#modal').dialog('close'); 			}, 			jsonReader : { root: 'rows', page: 'page', total: 'total' , records: 'records' } 		}); 		 		 		jQuery("#list2").jqGrid('navGrid','#pager2',{edit:false,add:false,del:false,search:false,refresh:false}); 		jQuery("#list2").jqGrid('navButtonAdd',"#pager2",{caption:"Search",title:"Toggle Search", 			onClickButton:function(){  				if(jQuery("#filter").css("display")=="none") { 					jQuery(".HeaderButton","#gbox_list2").trigger("click"); 					jQuery("#filter").show(); 				} 			}  		}); 		jQuery("#list2").jqGrid('navButtonAdd',"#pager2",{caption:"Clear",title:"Clear Search",buttonicon:'ui-icon-refresh', 			onClickButton:function(){ 				var stat = jQuery("#list2").getGridParam('search'); 				if(stat) { 					var cs = jQuery("#filter")[0]; 					cs.clearSearch(); 				} 			}  		}); 		jQuery("#filter").jqGrid('filterGrid',"list2", 			{ 				gridModel:true, 				gridNames:true, 				formtype:"vertical", 				enableSearch:true, 				enableClear:false, 				autosearch: false, 				afterSearch : function() { 					jQuery(".HeaderButton","#gbox_list2").trigger("click"); 					jQuery("#filter").css("display","none"); 				} 			} 		); 

and my HTML is:

<div id="modal" title="Search">

	<table id="list2" class="scroll" cellpadding="0" cellspacing="0"></table>
	<div id="pager2" class="scroll" style="text-align:center;"></div>
	<div id="filter" style="margin-left:30%;display:none">Search</div>	
</div>