Missing and mis-aligned column header in jqgrid?

Question

There are 3 columns in my jqGrid: ‘Index’, ‘Name’, ‘Code’.

I drag and increase the width of any of the rows such that horizontal scroll appears and we are at the right-most end.

Now the ‘Index’ column is either partially visible or completely hidden. I use the search toolbar of 'Code'.

I clear the search toolbar of 'Code'. But now, the horizontal-scroll doesn’t include ‘Index’ column and column headers are mis-aligned with their data.

jQuery("#list451").jqGrid({
 url:'localset.php',
 datatype: "json",
 height: 255,
 width: 600,
 colNames:['Index','Name', 'Code'],
 colModel:[ {name:'item_id',index:'item_id', width:65, sorttype:'integer', searchoptions:{sopt:['eq','ne','le','lt','gt','ge']}},
 {name:'item',index:'item', width:150, sorttype:'string', searchoptions:{sopt:['eq','bw','bn','cn','nc','ew','en']}},
 {name:'item_cd',index:'item_cd', width:100} ], 
rowNum:50, 
rowTotal: 200, 
rowList : [20,30,50], 
loadonce:true, 
mtype: "GET", 
rownumbers: true, 
rownumWidth: 40, 
gridview: true, 
pager: '#pager451', 
sortname: 'item_id', 
viewrecords: true, 
sortorder: "asc", 
caption: "Loading data from server at once" }); jQuery("#list451").jqGrid('filterToolbar',{searchOperators : true});

please check above images

Answer 1

Probably you should manually set scrollLeft property of hDiv (the div with all headers of the grid) to the value from bDiv (the div with the body of the grid).

I don't have working demo where I can reproduce your problem. You can try to add the following line in loadComplete:

this.grid.hDiv.scrollLeft = this.grid.bDiv.scrollLeft;

I hope it will fix the problem.