Jqgrid Editable Column Width According To Its Content
Solution 1:
You are right. It seems to me now that i would be more effective to include wrapping <span>
only temporary to measure the width of the cell. In the case the wrapping span will not stay in cells and no problems which you described will be ever seem more.
The demo provides modified version of the implementation "autowidth" behavior in the grid. It uses the following code
var autosizeColumn = function (iCol) {
var $this = $(this), iRow, rows, row, colWidth,
cm = typeof iCol === "string" ? $this.jqGrid("getColProp", iCol) : $this.jqGrid("getGridParam", "colModel")[iCol],
getOuterWidth = function ($elem) {
var $wrappingSpan, width;
$elem.wrapInner("<span class='mywrapping'></span>");
$wrappingSpan = $elem.find(">.mywrapping");
width = $wrappingSpan.outerWidth();
$elem.html($wrappingSpan.html());
return width;
};
if (cm == null || cm.hidden) {
return; // don't change the width of hidden columns
}
colWidth = getOuterWidth($(this.grid.headers[iCol].el).find(">div")) + 25; // 25px for sorting iconsfor (iRow = 0, rows = this.rows; iRow < rows.length; iRow++) {
row = rows[iRow];
if ($(row).hasClass("jqgrow")) {
colWidth = Math.max(colWidth, getOuterWidth($(row.cells[iCol])));
}
}
$this.jqGrid("setColWidth", iCol, colWidth);
},
autosizeColumns = function () {
var $this = $(this), iCol,
colModel = $this.jqGrid("getGridParam", "colModel"),
n = $.isArray(colModel) ? colModel.length : 0;
for (iCol = 0; iCol < n; iCol++) {
autosizeColumn.call(this, iCol);
}
};
$grid.bind("jqGridAfterLoadComplete jqGridRemapColumns jqGridInlineAfterSaveRow", autosizeColumns);
UPDATED. Alternatively one can use autoWidthColumns
plugin which I posted as jQuery.jqGrid.addColumn.js
here. In the case one needs just to include both jQuery.jqGrid.setColWidth.js
and jQuery.jqGrid.autoWidthColumns.js
and to create the grid using $("#gridid").jqGrid("autoWidthColumns").jqGrid({/*option*/});
instead of the standard $("#gridid").jqGrid({/*option*/});
.
The demo uses the autoWidthColumns
plugin.
Post a Comment for "Jqgrid Editable Column Width According To Its Content"