I developed AJAX interface with jQuery and jqGrid.
How I can remove horizontal scrollbar from my jqGrid table?
http://dskarataev.ru/jqgrid.png
If I set autowidth: true
, then I get width of table = sum width of columns, but I need width of table = width of parent element with id returned by function getSelectedTabHref()
so I make function:
$(window).bind('resize', function() {
$('#tasks').setGridWidth($(getSelectedTabHref()).width());
$('#tasks').setGridHeight($(window).height()-190);
}).trigger('resize');
and here is how I create jqGrid table:
$('#tasks').jqGrid({
datatype: 'local',
colNames:[labels['tasksNum'],labels['tasksAdded']+"/"+labels['tasksAccepted'],labels['tasksOperator'],labels['tasksClient'],labels['tasksManager'],labels['tasksDesc']],
colModel :[
{name:'taskId', index:'taskId', width:1, align:'right'},
{name:'taskAdded', index:'taskAdded', width:3},
{name:'taskOperator', index:'taskOperator', width:4},
{name:'taskClient', index:'taskClient', width:7},
{name:'taskManager', index:'taskManager', width:4},
{name:'taskDesc', index:'taskDesc', width:8}]
});
i adjusted ui.grid.css because i did not need a horizontal scrollbar at all. i did this:
.ui-jqgrid .ui-jqgrid-bdiv {
position: relative;
margin: 0em;
padding:0;
/*overflow: auto;*/
overflow-x:hidden;
overflow-y:auto;
text-align:left;
}
the commented was how it was, i just used overflow-x to hide the horizontal scrollbar and now all is fine with me.