CODEWITHSUNDEEP
javascriptjqgrid
Sumit
Sumit

Reputation: 1669

jqGrid column not aligned with column headers

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?

Upvotes: 9

Views: 21647

Answers (6)

user2331348
user2331348

Reputation: 1

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%');
                },

Upvotes: 0

Kadir Gulec
Kadir Gulec

Reputation: 1

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";
    }
}
  1. 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.
  2. I am lazy to write the general case code

Upvotes: 0

Jerry
Jerry

Reputation: 63

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

Upvotes: 0

Zecarro
Zecarro

Reputation: 17

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

Upvotes: 0

Mukthesh
Mukthesh

Reputation: 106

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.

Upvotes: 7

Oleg
Oleg

Reputation: 222007

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.

Upvotes: 0

Related Questions