jqGrid 4.8.2 Grid width changes after columnChooser is done

Question

I am using jqGrid 4.8.2 and have set up my grid with a fixed width. But, when I modify the displayed columns using columnChooser, the width of the grid is readjusted to the combined width of all columns and the horizontal scroll is gone. I've tried resetting the width within the 'done' columnChooser param but it does not work. After some debugging it seems the resizing happens after 'done' is completed and after the dialog window is closed. I created a button to reset the width manually and that works just fine so I know resetting the width can happen. I just don't know which event to use to trigger it.

var defaultColModel = 
[   
    {name:'REQUESTEDDATE'
        ,index:'r.requestedDate'
        ,label:'Request Date'
        ,sorttype:"date"
        ,template: "date"
        ,search:true
        ,width:100
        ,hidden:false
    },
    {name:'VENDORNAME'
        ,index:'v.companyName'
        ,label:'Vendor'
        ,search:true
        ,stype:'text'
        ,width:150
        ,formatter:'showlink'
        ,formatoptions:{baseLinkUrl:'<cfoutput>#application.rootpath#</cfoutput>', addParam: '&page=dsp_request#vendorT', idName:'REQUESTID'}
        ,hidden:false
    },
    {name:'VENDORID'
        ,index:'r.vendorID'
        ,label:'Vendor ID'
        ,search:true
        ,stype:'text'
        ,width:100
        ,hidden:true
    },
    {name:'VENDORCONTACT'
        ,index:'vendorContact'
        ,label:'Vendor Contact'
        ,stype:'text'
        ,search:true
        ,width:100
        ,hidden:true
    } // there are many more cols.  Just showing a few to illustrate how they are defined.
]
var myGrid = jQuery("#contract_grid").jqGrid({
    url:            'cfc/com_ajxRequestNew.cfc?method=getReqJSON&returnformat=json',
    datatype:       'json',
    postData:       {filters: myFilters},
    mtype:          'POST',
    search:         true,
    colModel:       defaultColModel,
    gridview:       false, //added for IE 
    altRows:        true,
    emptyrecords:   'NO DATA FOUND',
    height:         400,
    width:          1200,
    sortname:       lastSortName,
    sortorder:      lastSortOrder,
    page:           lastPage,
    pager:          jQuery('#report_pager'),
    rowNum:         lastRowNum,
    rowList:        [10,20,50,100],
    viewrecords:    true,
    clearSearch:    false,
    caption:        "Contracts Dashboard",
    sortable:       true,
    shrinkToFit:    false,
    excel:          true,
    ajaxSelectOptions: {type: "GET"},
    gridComplete: function() {//removed code for simplicity}
});
jQuery("#contract_grid").navGrid('#report_pager',{
    edit:false,
    add:false,
    del:false,
    search:false,
    refresh:false
}).navButtonAdd("#report_pager",{
    caption: "Columns",
    buttonicon: "ui-icon-calculator",
    title: "Select and Reorder Columns",
    jqModal: true,
    onClickButton: function(e){

        $('#contract_grid').jqGrid('columnChooser', {
            dialog_opts: {
                modal: true,
                minWidth: 470,
                show: 'blind',
                hide: 'explode'
            },
            done : function (perm) {
              if (perm) {
                  // "OK" button are clicked
                  $('#contract_grid').jqGrid("remapColumns", perm, true);

                  // **UPDATED WORKING CODE**get the width set for the grid
                  var gwdth = $('#contract_grid').jqGrid("getGridParam","width");
                 // set the tblwidth so the grid does not get resized
                  $('#contract_grid').setGridParam({tblwidth:gwdth});

              } else {
                  // we can do some action in case of "Cancel" button clicked
              }
           }
        }); 
    }

});

Answer 1

You don't posted the most important part of your code: colModel. At least the definition of the column which should be "fixed" is important to know.

The column which should have fixed width should have fixed: true property. It will prevent its width from changing.

UPDATED: I'm still not sure what you want to implement, but I don't know specific behavior of jqGrid 4.8.2 because I develop alternative fork free jqGrid which you can try just including URL to the code on GitHub (see here).

In general there are exist two important internal parameters: tblwidth and width. The tblwidth is the width of the body of the grid (the <table>) and there are exist width which is the total width of the grid: the width of outer div. I suppose that jqGrid 4.8.2 makes wrong choice in your case between tblwidth and width. I would recommend you to try to replace var gwdth = $('#contract_grid').jqGrid("getGridParam","width"); inside of the code of done callback to var gwdth = $('#contract_grid').jqGrid("getGridParam","tblwidth");

Free jqGrid saves the original width which you used during creating the grid in widthOrg option of jqGrid and it uses the following line inside of columnChooser

$self.jqGrid("setGridWidth",
    !p.autowidth && (p.widthOrg === undefined || p.widthOrg === "auto" || p.widthOrg === "100%") ? p.tblwidth : p.width,
    p.shrinkToFit);

You don't specified autowidth: true and you used width: 1200 option during creating the grid (which will be widthOrg later). So free jqGrid should uses tblwidth in your case by default instead of width.