jqGrid column not aligned with column headers

Question

This question was asked here. jqGrid column not aligned with column headers

But the border-right-color style doesnt seem to work for me.

I am using jqGrid 3.8 and IE 8

This is my setup for jqGrid

shrinkToFit:true,
colModel :[
  {name:'leid', index:'leid', width:70, label:'LEID'},
  {name:'cdr', index:'cdr', width:40, label:'CDR'},
  {name:'name', index:'name', width:160, label:'Name'},
  {name:'country', index:'country', width:98, label:'Country'},
  {name:'fc', index:'fc', width:50, label:'FC'},
  {name:'bslaMe', index:'bslaMe', width:65, label:'BSLA/ME'},
  {name:'business', index:'business', width:130, label:'Business'},
  {name:'amtFc', index:'amtFc', width:98, label:'Amt(FC)', align:'right',
   formatter:'currency', formatoptions:{decimalSeparator:".",
   thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"",
   defaultValue: '0'} },
  {name:'amtUsd', index:'amtUsd', width:98, label:'Amt(Cur)', align:'right',
   formatter:'currency', formatoptions:{decimalSeparator:".",
   thousandsSeparator: ",", decimalPlaces: 2, prefix: "", suffix:"",
   defaultValue: '0'} },
  {name:'cashPoolHeader', index:'cashPoolHeader', width:120,
   label:'Cash Pool Header'},
  {name:'cashPoolCDR', index:'cashPoolCDR', width:60, label:'CP CDR'},
  {name:'cashPoolName', index:'cashPoolName', width:160, label:'Cash Pool Name'}
],

Any thoughts?

Answer 1

I was having the same issue, I solved this issue by appending 4 lines of code in gridComplete, these 4 lines will change the style of td's of content area [first row td's style modification is enough].

This is an issue in jqgid, which is actually setting the td's inside the <thead> but this style is not reflecting in the td's of content area. While developing jqgrid they assumed that entire columns width will be effected by changing widths of one row's tds but they only changed for <thead> which is the persisting issue here.

Set column widths in the colModel:

colModel: [ 
    { 
        name: 'Email', 
        index: 'Email', 
        editable: true, 
        edittype: 'custom', 
        width: 220, 
        editoptions: { 
            custom_element: function(value, options) { 
                return EmailAddressCustomElement(value, options); 
            }, 
            custom_value: function(elem) { 
                var inputs = $("input", $(elem)[0]); 
                return inputs[0].value; 
            } 
        } 
    },
    { 
        name: 'LocationAndRole', 
        index: 'LocationAndRole', 
        editable: true, 
        align: "left", 
        edittype: "button", 
        width: 170, 
        editoptions: { 
            value: 'Edit Location And Role', 
            dataEvents: [{ 
                type: 'click', 
                fn: function(e) { 
                    ShowUsersLocationAndRoles(e); 
                } 
            }] 
        } 
    }
]

add the below code in the gridComplete event:

gridComplete: function() { 
    var objRows = $("#list_accounts tr"); 
    var objHeader = $("#list_accounts .jqgfirstrow td"); 

    if (objRows.length > 1) { 
        var objFirstRowColumns = $(objRows[1]).children("td"); 
        for (i = 0; i < objFirstRowColumns.length; i++) { 
            $(objFirstRowColumns[i]).css("width", $(objHeader[i]).css("width")); 
        } 
    } 
}

I hope the above code will help you in solving the issue.

Answer 2

I know its very Old , but I have faced the same issue today (4.5.1 version) while working on a legacy application and the @Zecarro's solution helped me. I had to modify the script to set the column width instead of Header width to make it working though.

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
var width= col.outerWidth();

var headerWidth = $(objHeader [i]).width();
col.width(headerWidth);
}

Answer 3

The code above wasn't working for me

I changed it a little: Working fine with 4.6.0

var objHeader = $("table[aria-labelledby=gbox_" + gridName+ "] tr[role=rowheader] th");

for (var i = 0; i < objHeader.length; i++) {
   var col = $("table[id=" + gridName+ "] td[aria-describedby=" + objHeader[i].id + "]");
   var width= col.outerWidth();
   $(objHeader[i]).css("width", width);
}

Answer 4

Look at my old answer which describes how to change the column header alignment.

It it is not what you want, then you should post a picture which shows how grid look like and add in your question the full code of you grid including HTML code, information about version of jqGrid which you use and the test data. So all what one need to reproduce your problem.