jQuery Grid Plugin - jqGrid - Topic: How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height Simple:Press Version 5.7.5.3 tony on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p31004 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p31004 Hello,

Thanks. It works ok now.

 

Kind Regards

]]> Thu, 21 Aug 2014 17:20:51 +0300 pphillips001 on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30996 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30996 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

]]> Thu, 21 Aug 2014 10:55:22 +0300 tony on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30945 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30945 Hello,

 

Thanks for the code and the idea , but there is a problem when we try to sort.

 

Kind Regards

]]> Mon, 11 Aug 2014 15:17:02 +0300 pphillips001 on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30932 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p30932 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);
}

]]> Fri, 08 Aug 2014 17:13:36 +0300 kobruleht on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p26448 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p26448 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>

]]> Sun, 22 Apr 2012 22:27:00 +0300 Vincent Ghomus on How to achieve fluid jqGrid height http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p26296 Discussion http://www.trirand.com/blog/?page_id=393/discussion/how-to-achieve-fluid-jqgrid-height#p26296 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

]]> Thu, 05 Apr 2012 08:11:12 +0300