jqGrid use rest of page

Question

I am using jqGrid, and have it set up like this:

<body>
   <div>
      Header
   </div>
   <div>
      <table id="list4"></table>
   </div>
</body>

I am populating it using the demo code from here: http://www.trirand.com/blog/jqgrid/jqgrid.html, Loading Data-> Array Data.

I want the grid to take up the rest of the bottom of the page, and, grow / shrink as the page is resized. In addition, I would like scrollbars when the grid goes off the edge of the screen.

How would I go about doing that?

You can have a look at this answer http://stackoverflow.com/questions/875225/resize-jqgrid-when-browser-is-resized — Piyush Sardana, Aug 12 '12 at 18:03

score 0 · Accepted Answer · answered Aug 12 '12 at 17:53

You need to attach a resize event to the window like this:

$(window).resize(function() {
  $("#list4").setGridHeight(<some calculation>);
});

See the documentation of setGridHeight here:

http://www.trirand.com/jqgridwiki/doku.php?id=wiki:methods#grid_related_methods

Be careful with using resize events though since they are triggered differently by different browsers. See here:

http://api.jquery.com/resize/

jqGrid use rest of page

1 Answers1