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?

Spirituel

I apologize for the formatting of the code... – Spirituel

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.

Tarantella

Thank you, this has issue has been killing me for a while now. Surprised this issue is 2+ years old... – Steinke

Thank you @Muktesh.I was breaking head solving this issue.Great solution. – Stroll

Answer 2

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.

Interscholastic

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);
}

Centavo

Answer 4

I know it is very old, but I have faced the same issue today (4.5.1 version) while working on a legacy application and @Zecarro's solution helped me. I had to modify the script to set the column width instead of Header width to make it work, 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);
}

Elam

Answer 5

In my case,

1. jqgrid version 4.4.4
2. There were group headers
3. All the columns had equal length in the column model=> width:100
4. in GridComplete event I called the following function

function alignColumnsWithHeaders(gridName) {

    //alert("giriyor");
    var objTableDiv = $("div[id=gview_" + gridName + "]");
    var tableLength = objTableDiv.width();
    var objHeader = $("table[aria-labelledby=gbox_" + gridName + "] tr[class=jqg-   first-row-header] th");
    var columnLength = tableLength / objHeader.length;
    columnLength = Math.floor(columnLength);        
    for (var i = 0; i < objHeader.length; i++) {
        objHeader[i].style.width = columnLength.toString() + "px";
    }
}

5. For the general case, I inspected the html produced by jqgrid and I realized that: 5.1 Under the thead section, there were three rows 5.1.1 Row 1 contains the original column header widths as pixels, and these values are used for the table header widths 5.1.2 Row 2 contains (in my case) some column headers spanning 2 rows and group headers spanning a number of columns. 5.1.3 row 3 contains row headers for the group headers 5.2 The header widths of the row 2 and row 3 elements are used for the column widths of the table.
6. I am lazy to write the general case code

Aureolin

Answer 6

In my case, I use jqgrid 4.6.0 and solved the problem by adding the following code to the gridComplete and resizeStop event functions:

                gridComplete: function () {
                    $('.ui-jqgrid-htable').css('table-layout', 'fixed');
                    $('.ui-jqgrid-htable').css('width', '100%');
                },
                resizeStop: function (width, index) {
                    $('.ui-jqgrid-htable').css('table-layout', 'fixed');
                    $('.ui-jqgrid-htable').css('width', '100%');
                },

Knockknee