Forum
08:11
04/04/2012
Hi,
I need to achieve fluid property in height for jqGrid. As far as i searched, I could see fluid property only in width. I'm using "jquery.jqGrid.fluid.js" for achieving fluid property in width. When we use a high resolution monitor the grid may occupy only small potion of it. So how to expand the grid height and pagination also need to be changed according resolution changes. For me the grid height only expands, but pagination not happening. I've uploaded my grid's snap in the following link: 2shared.com/photo/6l2Objaq/jqGrid.html . Please help me.
Thanks
22:27
05/05/2011
Use this method:
$(window).resize(function () { resizeGrid() });
<script>
function resizeGrid() {
setTimeout( function() {
var toppager_height=$("#grid_toppager").outerHeight(true),
header_height=$("div#gview_"+$grid[0].id+" > div.ui-jqgrid-hdiv").outerHeight(true);
var height = $(window).height()-$('#grid1container')[0].offsetTop-toppager_height-header_height-2;
$grid.jqGrid("setGridWidth", $('#grid1container').width() , false);
if (height>60)
$grid.jqGrid('setGridHeight', height );
}, 100 );
}
</script>
<div id="grid1container" style="width: 100%">
<table id="grid">
</table>
</div>
17:13
22/10/2013
I know this question is old, but the reply is a clunky and slow.
Here's a CSS approach:
Add this to the grid definition (change the name of gridName to that of your grid)
beforeRequest: function () {
 setTimeout(function () {
  var gridName = 'grid';
  $('#gbox_' + gridName).css({
   position: 'absolute',
   top: 0,
   bottom: $('#gbox_' + gridName + ' .ui-pager-control').outerHeight() + 'px',
   width: '100%',
   height: '100%'
  });
  $('#gbox_' + gridName + ' .ui-jqgrid-view').css({ 'height': '100%' });  $('#gbox_' + gridName + ' .ui-jqgrid-bdiv').css({
   position: 'absolute',
    top: $('#gbox_' + gridName + ' .ui-jqgrid-titlebar').outerHeight() + $('#gbox_' + gridName + ' .ui-jqgrid-hbox').outerHeight() + 'px',
    bottom: 0,
    left: 0,
    right: 0,
    height: '',
    width: ''
  }); }, 100);
}
15:17
Moderators
30/10/2007
Hello,
Â
Thanks for the code and the idea , but there is a problem when we try to sort.
Â
Kind Regards
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.
10:55
22/10/2013
Glad to help
The problem you mention is the 'Loading' sign not going away - that was just to do with the missing grid.locale-en.js.
*Edit - just spotted I had the wrong sort type on the 'thingy' column.
It wasn't related to the resizing. Â Here's a new link:
I'm using this CSS injection on dozens of grids and all work perfectly.
Regards
Â
Paul
17:20
Moderators
30/10/2007
Hello,
Thanks. It works ok now.
Â
Kind Regards
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:
47 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