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.