Why is setColWidth not working on Jqgrid?

Question

My grid is as below,

<table id="grid"></table>

var data = [[48803, "DSK1", "", "02200220", "OPEN"], [48769, "APPR", "", "7773333777733337777333377773333777733337777333377773333777733337777333377773333777733337", "ENTERED"]];

$("#grid").jqGrid({
    datatype: "local",
    height: 250,
    colNames: ['Inv No', 'Thingy', 'Blank', 'Number', 'Status'],
    colModel: [{
        name: 'id',
        index: 'id',
        width: 60,
        sorttype: "int"},
    {
        name: 'thingy',
        index: 'thingy',
        width: 90,
        sorttype: "date"},
    {
        name: 'blank',
        index: 'blank',
        width: 30},
    {
        name: 'number',
        index: 'number',
        width: 80,
        sorttype: "float"},
    {
        name: 'status',
        index: 'status',
        width: 80,
        sorttype: "float"}
    ],
    caption: "Stack Overflow Example",
    // ondblClickRow: function(rowid,iRow,iCol,e){alert('double clicked');}
});

var names = ["id", "thingy", "blank", "number", "status"];
var mydata = [];

for (var i = 0; i < data.length; i++) {
    mydata[i] = {};
    for (var j = 0; j < data[i].length; j++) {
        mydata[i][names[j]] = data[i][j];
    }
}

for (var i = 0; i <= mydata.length; i++) {
    $("#grid").jqGrid('addRowData', i + 1, mydata[i]);
}


$("#grid").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
        var $this = $("#grid"),
        $cells = $this.find(">tbody>tr>td"),
        $colHeaders = $this.closest(".ui-jqgrid-view").find(">.ui-jqgrid-hdiv>.ui-jqgrid-hbox>.ui-jqgrid-htable>thead>.ui-jqgrid-labels>.ui-th-column>div"),
        colModel = $this.jqGrid("getGridParam", "colModel"),
        iCol,
        iRow,
        rows,
        row,
        n = $.isArray(colModel) ? colModel.length : 0,
        cm,
        colWidth,
        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];
            if (cm.hidden) {
                continue;
            }
            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());
                }
            }
            //$("#grid").jqGrid("setColWidth", iCol, colWidth);
            alert(iCol + colWidth);
            //$("#grid").jqGrid('setColProp',iCol,{width:colWidth});
            $('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);}); // will set the column widths

            //var gw = $("#grid").jqGrid('getGridParam','width');

            //$("#grid").jqGrid('setGridWidth',gw);
        }
    });


<style type="text/css">
    .ui-jqgrid tr.jqgrow td {
        word-wrap: break-word; /* IE 5.5+ and CSS3 */
        white-space: pre-wrap; /* CSS3 */
        white-space: -moz-pre-wrap; /* Mozilla, since 1999 */
        white-space: -pre-wrap; /* Opera 4-6 */
        white-space: -o-pre-wrap; /* Opera 7 */
        overflow: hidden;
        height: auto;
        vertical-align: middle;
        padding-top: 3px;
        padding-bottom: 3px
    }
</style>

I am trying to set auto width for the columns using ,

 $("#grid").jqGrid("setColWidth", iCol, colWidth);

which have resulted me in 'setColWidth is undefined'. BTW i am using jquery1.8.

Then i tried using this way,

$('#grid tr').find('td:eq('+iCol+')').each(function(){$(this).css('width',colWidth);});

this is not giving any script error however it is not setting the width for column as well.

But the width is being printed for each column correctly when i do ,

        alert(iCol + colWidth);

What is that i am doing mistake in this code? Can any help me in this issue?

how can i resolve this issue...?

Need help please...

Thanks in Advance...

Answer 1

jqGrid 4.4.1 is really very old version. In any way it have no setColWidth method, which I introduced as plugin to jqGrid in the answer originally. If you have to use setColWidth you have to include jQuery.jqGrid.setColWidth.js which you can download from GitHub. Later I included the method and implemented the functionality auto-width in free jqGrid 4.8. It's the fork of jqGrid which I develop (see the readme). See the wiki article for more information.

I recommend you to update to free jqGrid 4.9.1 or to the latest code which you can download from GitHub. In the case you will be have setColWidth method and many other features.