jquery - Jqgrid Editable Column width According to Its Content

Question

I have included the code provided by Oleg in this link.It works perfectly to set the size of the column depending on its content. The only problem I am facing right now is this that when I set "editble: true" for a column value, the span is also getting displayed along with the element.This span was added to the individual cells to acquire the width of the text present in the cells.now to edit the coloumn the column value that is displayed is:

<span class="mywrapping">text</span>

Please help.

Answer 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 icons
        for (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.