I came across a helpful post on adjusting Jqgrid Column width According to Its Content, and decided to implement it in my project.
Jqgrid Column width According to Its Content
The adjustment takes place after the load complete event of jqgrid.
loadComplete : function () {
$("#list").bind("jqGridAfterLoadComplete", function () {
var $this = $(this), iCol, iRow, rows, row, cm, colWidth,
$cells = $this.find(">tbody>tr>td"),
$colHeaders = $(this.grid.hDiv).find(">.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
colModel = $this.jqGrid("getGridParam", "colModel"),
n = $.isArray(colModel) ? colModel.length : 0,
idColHeadPrexif = "jqgh_" + this.id + "_";
$cells.wrapInner("<span class='mywrapping'></span>");
$colHeaders.wrapInner("<span class='mywrapping'></span>");
for (iCol = 0; iCol < n; iCol++) {
cm = colModel[iCol];
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth() + 25; // 25px for sorting icons
for (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
}
}
$this.jqGrid("setColWidth", iCol, colWidth);
}
});
}
While implementing this code, I encountered an issue where the column width was returning as zero at specific lines.
colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25;
This problem seemed to be related to special characters in the column headers even though autoencode was set to true. The column width was not being calculated correctly. Is there a need to parse these columns?
list_Code [HEAVY] [DUTY] [50]
Similarly, I noticed that the row outerwidth was also resulting in zero at this line,
colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());
As a consequence, the width of all my rows remained fixed at 25 pixels.
Why am I unable to obtain the outerwidth() values for columns and rows in these scenarios?
If I use .html(), the Div content is displayed correctly like this,
var spans = $( "span" );
$(row.cells[iCol]).find(spans).html();
HTML DIV Trace :
TH
<th id="list_Code [HEAVY] [DUTY] [50]" role="columnheader" class="ui-state-default ui-th-column ui-th-ltr" style="width: 65px;">
<span class="ui-jqgrid-resize ui-jqgrid-resize-ltr" style="cursor: col-resize;"> </span>
<div id="jqgh_list_Code [HEAVY] [DUTY] [50]" class="ui-jqgrid-sortable">
<span class="mywrapping">Code [HEAVY] [DUTY] [50]<span class="s-ico" style="display:none">
<span sort="asc" class="ui-grid-ico-sort ui-icon-asc ui-state-disabled ui-icon ui-icon-triangle-1-n ui-sort-ltr">
</span><span sort="desc" class="ui-grid-ico-sort ui-icon-desc ui-state-disabled ui-icon ui-icon-triangle-1-s ui-sort-ltr"></span></span></span></div></th>
TD
<td role="gridcell" style="text-align:left;" title="FE" aria-describedby="list_Code [HEAVY] [DUTY] [50]"><span class="mywrapping"><div style="max-height: 100px">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEF...
It seems that the only issue lies with the widths...
Column Model Formatter:
formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },
All my column names contain special characters. Could this be the reason for the width calculation problems? If so, why are the row/cell widths also coming out as zero?
I have tried using width/inner/outer methods but none seem to work. Can someone provide some insights into this issue?