jQuery Grid Plugin - jqGridForum

Topic RSS

How to achieve fluid jqGrid height

05/04/2012
08:11

Vincent Ghomus

Member

Members

Forum Posts: 6

Member Since:
04/04/2012

Offline

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/04/2012
22:27

kobruleht

Member

Members

Forum Posts: 144

Member Since:
05/05/2011

Offline

Use this method:

$(window).resize(function () { resizeGrid() });

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>

08/08/2014
17:13

pphillips001

Member

Members

Forum Posts: 4

Member Since:
22/10/2013

Offline

I know this question is old, but the reply is a clunky and slow.

Here's a CSS approach:

http://jsfiddle.net/Ba5yK/11/

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

11/08/2014
15:17

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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.

21/08/2014
10:55

pphillips001

Member

Members

Forum Posts: 4

Member Since:
22/10/2013

Offline

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:

http://jsfiddle.net/Ba5yK/16/

I'm using this CSS injection on dozens of grids and allÂ workÂ perfectly.

Regards

Paul

21/08/2014
17:20

tony

Sofia, Bulgaria

Moderator

Members

Moderators

Forum Posts: 7721

Member Since:
30/10/2007

Offline

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.

All RSS

Forum Timezone: Europe/Sofia

Most Users Ever Online: 715

Currently Online:
47 Guest(s)