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
}
}
});
}
});
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
.