0

enter image description here

I am using jQgrid with few column headers grouped. The data content and column headers are misaligned. There was no issue with the same code with jquery.1.6.4, jquery-ui-1.8.16 versions but after the upgrade to jquery-1.11.0, jquery-ui-1.10.4 versions the datas are getting misaligned.

jQgrid version 4.4.0 has been used

Below are the script code snippet to generate the grid

function displayGrid(data){

var gridId = testGrid.attr('id');
testGrid.jqGrid('GridUnload');
testGrid= $('#' + gridId);

var colNames =['','Col1','Col2',"Col3",'Col4','Col5',
               'Col6','Col7','Col8','Col9,'Col10];
var colModels = [{name : 'id',index : 'id',align : "center",hidden : true},
                 {name : 'col1',index : 'col1',sortable : true,width : 35,align : "center"},
                 {name : 'col2',index : 'col2',sortable : true,editable : true,title:true,
                          align : "center",width:170,
                          resizable:false},
                {name : 'col3',index : 'col3',sortable : false,title : false,width : 40,align : "center",resizable : false},
                {name : 'col4',index : 'col4',sortable : false,align : "center",title : false,width : 30,resizable : false},
                {name : 'col5',index : 'col5',sortable : false,title : false,enable:"true",align : "center",width : 30,resizable : false},
                {name : 'col6',index : 'col6',sortable : true,editable : true,editoptions: { style: "text-transform: uppercase" },title : true,width :120,align : "center",resizable : false},
                {name : 'col7',index : 'col7',sorttype : true,editable : true,title : true,editoptions: { style: "text-transform: uppercase" },width : 120,align : "center",resizable : false},
                {name : 'col8',index : 'col8',width : 40,title : false,editable : true,editoptions : {maxlength : 3},hidden : false,align : "center",sortable : true,resizable : false},                    
                {name : 'col9',index : 'col9',sortable : true,title : false,width : 35,align : "center",resizable : false},
                {name : 'col10',index : 'col10',sortable : true,title : false,width : 35,align : "center",resizable : false}];
var groupColParamsHeaders = new Array();
var groupcolParams = {startColumnName :'col6',numberOfColumns :2,titleText : 'Group Header'};

jQuery("#testGrid").jqGrid('GridUnload');
testGrid.jqGrid({
                    datatype : "local",
                    data  : data,
                    altRows : true,
                    height : 'auto',
                    autowidth: true,
                    viewrecords : true,                     
                    'cellEdit': cellEditOverrideVal,
                    'cellsubmit' : 'clientArray',
                    'editurl': 'clientArray',
                    rowNum : data.length,
                    colNames : colNames,
                    colModel : colModels,
            });

// By commenting the header grouping the grid alignment seems to be fine but with grouping its getting misaligned

  testGrid.jqGrid('setGroupHeaders', {
    useColSpanStyle : true,
    groupHeaders : groupcolParams
});

}

Here is the HTML code 

<div style="overflow: auto; height: 400px;" id="divConfig" class="tms-display-block">
            <table id="testGrid"><tr><td/></tr></table> 
</div>

Please find the misaligned snapshot below enter image description here Can anyone help me in resolving the issue? Thanks in advance

Gopi
  • 909
  • 1
  • 8
  • 15
  • The version 4.4.0 is **very old (mare as 4 years old)** and it's dead sinse a long time. It contains of cause many bugs, which are fixed in the later versions of jqGrid. Try to replace URLs with jqGrid files (`ui.jqgrid.css`, `grid.locale-en.js`, `jquery.jqgrid.min.js`) to the URLs of free jqGrid 4.13.3. You can load the files directly from CDN (see [the wiki article](https://github.com/free-jqgrid/jqGrid/wiki/Access-free-jqGrid-from-different-CDNs)). I think that migration to the current version of [free jqGrid](https://github.com/free-jqgrid/jqGrid), which I develop, will fix the problem. – Oleg Jul 15 '16 at 09:37
  • Thanks Oleg. It worked. But unfortunately our application is not in the state to get migrated to latest version now. So r there any temp fixes – Gopi Jul 15 '16 at 11:05
  • I see no other way as the usage of the version which has all bug fixes. If you have to use old version of jqGrid then you have to get all its bugs. I recommend you to discuss in your company the risk of the usage the old version. Look at [the old answer](http://stackoverflow.com/a/10621951/315935). jqGrid had wrong calculation of the width of the columns in Chrome after publishing one new version. The described problem was fixed in jqGrid 4.3.3. The same problem can appear today too and your application will work incorrect in the next version of Chrome/Firefox etc. – Oleg Jul 15 '16 at 12:02
  • The fix can be made only in **the latest version** of jqGrid. Thus if free jqGrid 4.13.3 would have a problem then I would publish free jqGrid 4.13.4, which fix the bug. The migration from free jqGrid 4.13.3 to free jqGrid 4.13.4 will be not required, but the migration from jqGrid 4.4.0 to free jqGrid 4.13.3 could have some minor problems which need be fixed. Is it better to made migration *before* you have some real problem in your application? – Oleg Jul 15 '16 at 12:05

0 Answers0