JQgrid horizontal scrollbar not showing

Question

I want to display a horizontal scrollbar for my JQgrid, but it is not showing up. Here is my grid code

    jQuery("#list").jqGrid({
url:'failReportFeeder.jsp?rep=fic&rid=1&deskId=RATES&ctlSelectedDate='+document.getElementById('ctlSelectedDate').value,
datatype: 'json',
colNames: ['Trader', 'Transaction Date', 'As of Trade Date', 'Settlement Date', 'Security Name', 'Cusip Numbers', 'Receive Deliver Type', 'Calc Fail Amount', 'Calculable Transaction Price', 'Principal', 'Accrued Interest',  'Trade Money', 'Accrued Interest To Date', 'External TRade Id', 'Group Customer Account Number', 'Group Customer Name',  'Outstanding Date', 'Customer Account', 'Salesperson Code', 'Depository Account', 'Comment', 'Customer Name', 'ISIN Code', 'Aging'],
colModel: [
{name: 'trader', index: 'trader', width: 200, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'trdate', index: 'trdate', width: 200, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'aotd', index: 'aotd', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'stdt', index: 'stdt', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'secn', index: 'mval', width: 200, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'csp', index: 'csp', width: 200, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'rdt', index: 'rdt', width: 200, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'cfa', index: 'cfa', width: 200, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'ctp', index: 'ctp', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'prin', index: 'prin', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'acin', index: 'acin', width: 100, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'trm', index: 'trm', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'aitd', index: 'aitd', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'etri', index: 'etri', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'gcan', index: 'gcan', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'gcn', index: 'gcn', width: 100, sorttype: 'text', align: 'center', search:true, stype:'text'},
{name: 'otd', index: 'otd', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'csa', index: 'csa', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'slc', index: 'slc', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'dpa', index: 'dpa', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'},
{name: 'cmt', index: 'cmt', width: 100, sorttype: 'text', align: 'center',search:true, stype:'text'},
{name: 'cstn', index: 'cstn', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'isin', index: 'isin', width: 100, align: 'center', sorttype: 'text',search:true, stype:'text'},
{name: 'agn', index: 'agn', width: 100, align: 'right', sorttype: 'float',search:true, stype:'text'}
   ],
pager: "#pager",
rowNum: 500,
rowList: [500,1000, 2000, 3000,4000],
sortorder: "desc",
viewrecords: true,
gridview: true,
autoencode: false,
height:475,
multiSort:true,
shrinkToFit:false,
multiselect:false,
ignoreCase:true,
autowidth: true,
loadonce:true,
caption:" Rates Desk Report"}).navGrid('#pager',{edit:false,add:false,del:false,search:true,refresh:true}).jqGrid('navButtonAdd',
'#pager',
{ caption: " Export to Excel ",
 position: "first",
 onClickButton: function(){
jQuery("#list").jqGrid('excelExport',
{
"url":"xlsxreporter.jsp?AppName=FailsReports&deskId=RATES&reportId=1&reportType=fic&BSNS_DT="+ document.getElementById('ctlSelectedDate').value
 });
}
});
$('#list').setGridWidth(1050, true);

please advise. i already have shrinktofit false and autowidth true. if i take out the $('#list').setGridWidth(1050, true); option, then the horizontal scrollbar shows up but then my grid extends beyond the boundary of the webpage. do i need to modify the grid cs somehow ?

Answer 1

Here the same question: How to show horizontal scroll bar in jqgrid

Without any code, some things you'll need to look at...

Do not use autowidth and make sure you are not using shrinkToFit (it needs to be set to false). Other than that, the horizontal scrollbar should appear with just those two changes. In addition to this, you should also make sure you set the width explicitly for each column within the column model.

Answer 2

Found the answer here

jqGrid and the autowidth option. How does it work?

the priority for jqgrid frame width is *jqgrid frame autowidth > jqgrid frame width > sum of column width *

the priority for column width is colmodel fixed > jqgrid frame shrinkToFit > colmodel width

so i just set the fixed property in colModel to true.

fixed:true