Why is outerWidth not working with jqgrid rows and columns?

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?