Forum
Log In
Home
Topic RSS
13:24
28/10/2008
Offline
I have a rather large set of columns and I am hiding the majority of these columns. Initially the grid was huge based on showing all columns, but as I started to hide the columns, the rows shrunk, but the headings did not. So I am left with a huge grid with horizontal scrolling, the headings equally spaced, and the rows with the data are confined to the 950px width that I specified. This behavior exists in both FF 3.0.3 and IE 7.
Here is a snippet of the configuration:
... colModel stuff ...
pager: jQuery('#pager'),
rowNum:30,
rowList:[50,100,150],
sortname: 'unload_consummated_time',
sortorder: 'desc',
viewrecords: true,
height: 575,
width: 950,
shrinkToFit: true,
})
.navGrid('#pager',{add:false,del:false,edit:false});
});
<h1>Grid</h1>
<table id="list" class="scroll" cellspacing=0 cellpadding=0 ></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</div>
Any help is much appreciated.
-jeff
03:08
Moderators
30/10/2007
Offline
Hello,
Could you please post the whole grid configuration.
Thank you
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
09:12
28/10/2008
Offline
Yeah, sorry.
jQuery(document).ready(function(){
jQuery("#list").jqGrid({
url:'example4.php',
datatype: 'json',
mtype: 'GET',
colNames:[
'Location',
'door_number',
'carrier_name',
'tractor_number',
'trailer_number',
'po_number',
'vendor_name',
'number_of_items',
'number_of_cases',
'number_of_pallets_received',
'price_invoiced_load',
'price_common_carrier',
'receipt',
'lumper',
'unload_consummated_time',
'unload_start_time',
'unload_finish_time',
'unload_release_time',
'unload_time',
'load_type',
'load_type_breakdown_percentage',
'load_type_mixed_percentage',
're_confirm',
're_pallet_count',
're_comments',
'sl_confirm',
'sl_pallet_count',
'sl_comments',
'pd_confirm',
'pd_case_count',
'pd_comments',
'oh_confirm',
'oh_time',
'oh_comments',
'np_confirm',
'np_time',
'np_comments',
'ns_confirm',
'ns_time',
'ns_comments',
'aw_confirm',
'aw_time',
'aw_comments',
'ot_confirm',
'ot_comments',
'comments',
'unload_net_time',
'arrival_date',
'pallet_type',
'trailer_size',
'trailer_size_comment',
'item_name',
'photo_names',
'created',
'username',
'record_type'
],
colModel :[
{name:'location', index:'location', align:'right'},
{name:'door_number', index:'door_number', hidden:'true'},
{name:'carrier_name', index:'carrier_name', hidden:'true'},
{name:'tractor_number', index:'tractor_number', hidden:'true'},
{name:'trailer_number', index:'trailer_number', hidden:'true'},
{name:'po_number', index:'po_number', hidden:'true'},
{name:'vendor_name', index:'vendor_name', hidden:'true'},
{name:'number_of_items', index:'number_of_items', hidden:'true'},
{name:'number_of_cases', index:'number_of_cases', hidden:'true'},
{name:'number_of_pallets_received', index:'number_of_pallets_received', hidden:'true'},
{name:'price_invoiced_load', index:'price_invoiced_load', align:'right'},
{name:'price_common_carrier', index:'price_common_carrier', align:'right'},
{name:'receipt', index:'receipt', align:'right'},
{name:'lumper', index:'lumper', hidden:'true'},
{name:'unload_consummated_time', index:'unload_consummated_time', align:'right'},
{name:'unload_start_time', index:'unload_start_time', align:'right'},
{name:'unload_finish_time', index:'unload_finish_time', align:'right'},
{name:'unload_release_time', index:'unload_release_time', align:'right'},
{name:'unload_time', index:'unload_time', align:'right'},
{name:'load_type', index:'load_type', align:'right'},
{name:'load_type_breakdown_percentage', index:'load_type_breakdown_percentage', align:'right'},
{name:'load_type_mixed_percentage', index:'load_type_mixed_percentage', align:'right'},
{name:'re_confirm', index:'re_confirm', hidden:'true'},
{name:'re_pallet_count', index:'re_pallet_count', hidden:'true'},
{name:'re_comments', index:'re_comments', hidden:'true'},
{name:'sl_confirm', index:'sl_confirm', hidden:'true'},
{name:'sl_pallet_count', index:'sl_pallet_count', hidden:'true'},
{name:'sl_comments', index:'sl_comments', hidden:'true'},
{name:'pd_confirm', index:'pd_confirm', hidden:'true'},
{name:'pd_case_count', index:'pd_case_count', hidden:'true'},
{name:'pd_comments', index:'pd_comments', hidden:'true'},
{name:'oh_confirm', index:'oh_confirm', hidden:'true'},
{name:'oh_time', index:'oh_time', hidden:'true'},
{name:'oh_comments', index:'oh_comments', hidden:'true'},
{name:'np_confirm', index:'np_confirm', hidden:'true'},
{name:'np_time', index:'np_time', hidden:'true'},
{name:'np_comments', index:'np_comments', hidden:'true'},
{name:'ns_confirm', index:'ns_confirm', hidden:'true'},
{name:'ns_time', index:'ns_time', hidden:'true'},
{name:'ns_comments', index:'ns_comments', hidden:'true'},
{name:'aw_confirm', index:'aw_confirm', hidden:'true'},
{name:'aw_time', index:'aw_time', hidden:'true'},
{name:'aw_comments', index:'aw_comments', hidden:'true'},
{name:'ot_confirm', index:'ot_confirm', hidden:'true'},
{name:'ot_comments', index:'ot_comments', hidden:'true'},
{name:'comments', index:'comments', hidden:'true'},
{name:'unload_net_time', index:'unload_net_time', align:'right'},
{name:'arrival_date', index:'arrival_date', align:'right'},
{name:'pallet_type', index:'pallet_type', hidden:'true'},
{name:'trailer_size', index:'trailer_size', hidden:'true'},
{name:'trailer_size_comment', index:'trailer_size_comment', hidden:'true'},
{name:'item_name', index:'item_name', hidden:'true'},
{name:'photo_names', index:'photo_names', hidden:'true'},
{name:'created', index:'created', hidden:'true'},
{name:'username', index:'username', hidden:'true'},
{name:'record_type', index:'record_type', hidden:'true'} ],
pager: jQuery('#pager'),
rowNum:30,
rowList:[50,100,150],
sortname: 'unload_consummated_time',
sortorder: 'desc',
viewrecords: true,
height: 575,
width: 950,
shrinkToFit: true,
imgpath: 'js/jqgrid/themes/basic/images',
caption: 'My first grid'
})
.navGrid('#pager',{add:false,del:false,edit:false});
});
</script>
I hope this helps.
Thanks,
-jeff
09:15
28/10/2008
Offline
Something else to note, if I look at the document with the grid in firebug, the header and navigation bars have widths of 4400px;.
I don't know if that sheds any lights on anything, but it was an observation nonetheless.
10:18
Moderators
30/10/2007
Offline
Hello,
Not sure what is here, but could you please try with this in the page
where the grid loads (set this between head tag)
<style>
html, body {
margin: 0;
padding: 0;
overflow: hidden;
width: 100%;
height: 100%
}
</style>
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
12:05
28/10/2008
Offline
Same problem.
I even removed the external style sheets that I was loading and that just caused the containing div to go fullscreen with no horizontal scoll bar, in other words, the grid went off the screen to the right.
The data rows are the expected size, but everything else is the same width as if all of of the columns were showing.
Thanks
02:36
Moderators
30/10/2007
Offline
Hello,
Clould you try with just simple page only with grid.
Thank you
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
09:55
28/10/2008
Offline
Here are the contents of <body>:
<body>
<table id="list" class="scroll" cellspacing=0 cellpadding=0 ></table>
<div id="pager" class="scroll" style="text-align:center;"></div>
</body>
And it's still happening.
Thanks,
-jeff
04:27
Moderators
30/10/2007
Offline
Hello,
I think that this is a CSS issue.
Do you have make changes to the css ?
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
17:17
28/10/2008
Offline
No, I have not made any changes to the css. But like I said earlier, if I look at it in Firebug, the header and navigation bars have widths of 4400px. Which is what is causing it, so something is not re-evaluating the content based on the hidden fields to size the grid appropriately.
I don't know if that sheds any light on it at all.
-j
06:56
Moderators
30/10/2007
Offline
Hello,
Just to test - could you please set width property of every column instead that they are hidden.
Regards
Tony
For professional UI suites for Java Script and PHP visit us at our commercial products site - guriddo.net - by the very same guys that created jqGrid.
Most Users Ever Online: 715
Currently Online:
58 Guest(s)
Top Posters:
OlegK: 1255
markw65: 179
kobruleht: 144
phicarre: 132
YamilBracho: 124
Renso: 118
Member Stats:
Guest Posters: 447
Members: 11373
Moderators: 2
Admins: 1
Forum Stats:
Groups: 1
Forums: 8
Topics: 10592
Posts: 31289
Newest Members:
, razia, Prankie, psky, praveen neelam, greg.valainis@pa-tech.comModerators: tony: 7721, Rumen[Trirand]: 81
Administrators: admin: 66
