JqGrid column does not match column headers

Question

This question was asked here. jqGrid column does not match column headers

But the border-right-color style doesn't 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 had the same problem, I solved this problem by adding 4 lines of code to gridComplete , these 4 lines will change the td style of the content area [the first line is td style modification enough]

This is a problem in jqgid that actually sets td inside a <thead> , but this style is not reflected in the td content area. When developing jqgrid, they assumed that the width of all columns would be done by changing the width of one row td , but they only changed for <thead> , which is a constant problem here.

Set the column width in 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 code below to 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 code above helps you solve the problem.

Answer 2

Take a look at my old answer , which describes how to change the alignment of a column heading.

This is not what you want, then you should post an image that shows what the grid looks like and add the complete code of your grid to your question, including the HTML code, the version information of jqGrid that you are using, and the test data. So , everything you need to reproduce your problem.

Answer 3

This code did not work for me

I changed it a bit: Works 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

I know that it is very old, but I ran into the same problem today (version 4.5.1) when I was working on an outdated application and the @Zecarro solution helped me. I had to modify the script to set the width of the column instead of the width of the header to make it work.

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