Why is outerWidth not working with jqgrid rows and columns?

Question

I am using the adjusting Jqgrid Column width According to Its Content suggested in this post,

Jqgrid Column width According to Its Content

This way after loadcomplete 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);
    }
});

}

Issue is i am getting zero for column width at this line

colWidth = $("#" + idColHeadPrexif + $.jgrid.jqID(cm.name) + ">.mywrapping").outerWidth()+25;

My column headers will have special characters this way,Though i have set autoencode : true. I am getting column width = 0. Do I need to parse these columns?

list_Code [HEAVY] [DUTY] [50]

And in the same way i am getting zero for the row outerewidth at this line,

colWidth = Math.max(colWidth, $(row.cells[iCol]).find(".mywrapping").outerWidth());

as a result, all the time width of my rows are being 25.

Why I am not able to fetch outerwidth() in these cases for coulms and rows?

Can anyone help?

However, if i print .html(), I am getting the DIv content correctly this way,

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;">&nbsp;</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">FEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFEFE</div></span></td>

Only problem is with width's..

Column Model Fomatter:

formatter : function(v){ return '<div style="max-height: 100px">' + v + '</div>'; },

All my column names have special characters.Is thats is the reason? If so why the row/cell width is also retrived as zero.

I tried width/inner/outer nothing worked.

Can any one shed some light on this?

First of all the old way which I suggested originally (`$cells.wrapInner(""); ...`) is **slow** because it modifies the texts. I would recommend you to use free jqGrid 4.9.1 or the latest code from [GitHub](https://github.com/free-jqgrid/jqGrid). Only if you can't migrate to free jqGrid you should invest more in debugging. **Could you post the demo which reproduces the problem?** What *column names* (not column headers) you use? If you use `name: "Code [HEAVY] [DUTY] [50]"` then you make an error. Which HTML version you use? HTML5 or ??? — Oleg, Aug 03 '15 at 19:22
@Oleg I use jquery 1.8 and jqgrid 4.4.1 and i cannot migrate as it is completely legacy code... is there any other better way to do this? — Sandy, Aug 03 '15 at 21:31
Sorry, but I asked you more questions as you answered. Which `name` properties you use in the grid? Do you have `name: "Code [HEAVY] [DUTY] [50]"` in `colModel`? Which HTML version you use? (How looks the first line with ` `?). HTML5 for example don't allow to use spaces in id and `name` property of `colModel` will be used to build ids (like you have seen yourself). So you have to change names of column, but still can use old `colNames` which will be displayed for the user. — Oleg, Aug 04 '15 at 11:39

score 0 · Accepted Answer · answered Aug 04 '15 at 11:53

It seems that you use name: "Code [HEAVY] [DUTY] [50]" and uses the same text in colNames or you use lable: "Code [HEAVY] [DUTY] [50]". You didn't posted JavaScript code which you use, so I have to guess. Moreover it's unclear which dialect of HTML you use on the page (which <!DOCTYPE html ...> you use on the page). It's important to understand that jqGrid uses name property of colModel to build id elements of some internal HTML structures of the grid. You have seen it in HTML fragments which you posted. HTML5 don't allow to use spaces inside of id (see here for example). You can hind the restrictions of HTML4 for ids here. Moreover the symbols [ and ] are wrong too at least in case of using very old jqGrid 4.4.1. So the value name: "Code [HEAVY] [DUTY] [50]" follows creating wrong HTML code dynamically. You should fix the values holding the same text displayed for the user (specified either by colNames or by label property of colModel). For example you can use

name: "Code_HEAVY_DUTY_50",
label: "Code [HEAVY] [DUTY] [50]"

Why is outerWidth not working with jqgrid rows and columns?

HTML DIV Trace :

TH

TD

Column Model Fomatter:

1 Answers1