I have a tree grid with many columns, all with specified width. And boy, it looks terrible since headers are out of sync with columns below, even if I have short data in them.
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 '' but this style is not reflected 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 '' 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.
I had the same issue. It turned out to be the existing, site default, css definitions for padding on table cells. Make sure your padding is consistent between your th and td tags. I put a div around the grid with a class of div, and added the following to my CSS:
.grid td, .grid th {
padding: 1pt 1ex !important;
}
Try to play with 'autowidth' and 'shrinkToFit' jqGrid parameters. For example, if 'shrinkToFit' is true, columns' width will be changed as if initial widths defines percentage. Read more here.
<div id="pager"></div>
<span id='ruler' class='ui-th-column' style='visibility:hidden;font-weight:bold'></span>
<script type="text/javascript">
var colNamesData = ['Inv No','Date Of the Transaction', 'Amount That Is Owed'];
var colModelData = [
{name:'invid', index:'invid', width:55},
{name:'invdate', index:'invdate', resizeToTitleWidth:true},
{name:'amount', index:'amount', align:'right', resizeToTitleWidth:true}];
jQuery(document).ready(function() {
var ruler = document.getElementById('ruler');
for (var i in colNamesData) {
if (colModelData[i].resizeToTitleWidth != true) {
continue;
}
// Measure the title using the ruler span
ruler.innerHTML = colNamesData[i];
// The +26 allows for padding and to fit the sorting UI
var newWidth = ruler.offsetWidth + 26;
if (newWidth < 100) {
// Nothing smaller than 100 pixels
newWidth = 100;
}
colModelData[i].width = newWidth;
}
jQuery("#list").jqGrid({
...
colNames: colNamesData,
colModel: colModelData,
shrinkToFit:false,
...
});
</script>
Set the Each Column width in percentage by CSS
Add the css classes as below
table.ui-jqgrid-htable thead{display:table-header-group}
#JQGridClientMaster td, #ui-jqgrid-htable th{display:table-cell}
Now Set the width to each column of and
#JQGridClientMaster td:nth-child(1),th#JQGridClientMaster_rn{width:2% !important;}
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); } }, ] }
},
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"));
}
}
}