col width is using in jqgrid, working perfectly in chrome but not working in mozilla 33.0 version

Question

I am using following for jqgrid, it is working perfectly in jqgrid, but it is not displaying in mozilla 33.0 what is showing in chrome.

<script type="text/javascript" src="js/viewTestReq.js"></script>   
<script type="text/javascript" src="../js/popup/popup.js"></script>
<script type="text/javascript"
        src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript"
        src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/jquery-ui.min.js"></script>
<script type="text/javascript"
        src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/ui.multiselect-fixed.js"></script>
<script type="text/javascript"
        src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/i18n/grid.locale-en.js"></script>       
<script type="text/javascript"
        src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/js/jquery.jqGrid.src-columnChooser.js"></script>
<script type="text/javascript"
        src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.6.0/plugins/jQuery.jqGrid.setColWidth.js"></script>

<link rel="stylesheet" type="text/css"
      href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.11.1/themes/redmond/jquery-ui.css">
<link rel="stylesheet" type="text/css"
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/css/ui.jqgrid.css">
<link rel="stylesheet" type="text/css" 
      href="http://cdnjs.cloudflare.com/ajax/libs/jqgrid/4.6.0/plugins/ui.multiselect.css">

and the JavaScript code

$("#list1").on("jqGridSortCol", function (e, sortName, iCol, sortOrder) {
    alert("sortName=" + sortName + "\niCol=" + iCol + "\nsortOrder=" + sortOrder);
     //$("#list1").trigger("reloadGrid");

    var myorder=sortOrder;
    if (sortName === "idreleaseRequest") {
        alert(sortOrder);
        var ord=sortOrder;
        alert(ord);

    }
});

$("#list1").jqGrid("GridUnload")
$("#list1").jqGrid({ url:"./controllers/apGetTestData.php?testanzres=1&testsuite="+testsuite+"&testcase="+testcase+"&ch="+ch+"&fromdate="+fromdate+"&todate="+todate+"&mmss="+mmss, datatype: 'xml', mtype: 'GET', height: 'auto',
    colNames:[ 'RRID', 'Release Tag','Completed Date','Result','Firm Ware','DUT','Summary','Remarks'],
    colModel:[
        {name:'idreleaseRequest', index:'idreleaseRequest', width:80, sorttype: 'int'},
        {name:'releaseRequestTag', index:'releaseRequestTag'},
        {name:'DateInfo', index:'Date Info'},
        {name:'Result', index:'Result', sortable:false},
        {name:'FirmWare', index:'FirmWare', sortable:false},
        {name:'DUT', index:'DUT', sortable:false},
        {name:'Summary', index:'Summary', sortable:false, align:'left'},
        {name:'Remarks', index:'Total Suites', sortable:false}],
    pager: $('#pager1'),
    rowNum:6,
    rowList:[6,12,18,24],
    sortname: 'idreleaseRequest',
    sortorder: "DESC",
    caption:"Test Results : "+ globalData,      
    height: 'auto',
    viewrecords: true,
    gridview: true,
    caption: "test",
    rownumbers:true,
    shrinkToFit:false,
    hidedlg: true
});
$('#list1').jqGrid("setLabel", "rn", "SNo");

$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
    var $this = $(this),
        $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];
        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);
    }
});

This is the entire code i am using for jqgrid, it is working perfectly in chrome, and it is displaying correctly in chrome that what i am expecting to be, but in Mozilla 33.0 it is not showing correctly, what is showing in chrome. Please anyone help me on this, in advance thanks.

function  ShowHideColumn () {
                $.extend(true, $.ui.multiselect, {
                locale: {
                    addAll: 'Make all visible',
                    removeAll: 'Hide All',
                    itemsCount: 'Avlialble Columns'
                }
            });
            $.extend(true, $.jgrid.col, {
                width: 450,
                modal: true,
                msel_opts: {dividerLocation: 0.5},
                dialog_opts: {
                    minWidth: 470,
                    show: 'blind',
                    hide: 'explode'
                }
            });
          $("#list1").jqGrid("setColProp", "rn", {hidedlg: false});
         $('#list1').jqGrid('columnChooser',
         {

            done: function(perm) {
               if (perm) { self.jqGrid("remapColumns", perm, true); }       

        }
         });


}

Answer 1

First of all: you use wrong HTML markup in your demo:

<table id="list_records"><div id="perpage"></div></table>

should be fixed to

<table id="list_records"></table><div id="perpage"></div>

Seconds you permanently use index values different as name value ({name:'FirmWare',index:'name'} for example). I strictly recommend you to remove all index properties from colModel. Usage of index values which values are not the same as name value of the grid break sorting in the column.

Third: Even after installing Mozilla Firefox 33.0 beta 5 on my computer (Windows 7) I can't reproduce your problem: the width of all columns seems be correct after the loading. If I sort by the last column in Asc or Desc direction I get correct width value for all columns too.

UPDATED: It seems to me that the code which implement setting of width of columns based on the max column contain should be fixed by adding if (cm.hidden) { continue; } after the line cm = colModel[iCol];:

$("#list1").on("jqGridAfterLoadComplete jqGridRemapColumns", function () {
    var $this = $(this),
        $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());
            }
        }
        $this.jqGrid("setColWidth", iCol, colWidth);
    }
});

see the demo.