Make jqGrid fill it's container

Question

I am using the jQuery layout plugin and the jqGrid plugin in one of my projects and they work great except for a little problem...

I want the jqGrid to fill up completely the pane (jQuery layout pane) that contains it. Resizing the pane should resize the jqGrid, closing the pane should hide the jqGrid, etc, etc...

Both jqGrid and jQuery Layout provide callbacks but when I use them the page layout breaks horribly.

Has anyone any experience mixing jqGrid with jQuery Layout?

1. http://www.secondpersonplural.ca/jqgriddocs/index.htm
2. http://layout.jquery-dev.net/

Answer 1

I recommend you read through resize-jqgrid-when-browser-is-resized, which discusses several techniques for resizing your grid.

Answer 2

This is my current solution:

First create a resize function that is called by the onresize event:

function resizeGrid(pane, $Pane, paneState) {
  if(grid = $('.ui-jqgrid-btable:visible')) {
    grid.each(function(index) {
      var gridId = $(this).attr('id');
      $('#' + gridId).setGridWidth(paneState.innerWidth - 2);
    });
  }
}

Then in your layout we set up the resize event to call this method:

$('#mylayout_id').layout({
  center: {
    closable: false,
    resizable: false,
    slidable: false,
    onresize: resizeGrid,
    triggerEventsOnLoad: true  // resize the grin on load also
  },
  west: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  },
  east: {
    fxName: "slide",
    size:    250,
    maxSize: 300
  }
});

With this you can put jqGrid's inside any pane of your layout and they will be resized to fit the pane it is in when the center pane is resized.

1. http://groups.google.com/group/jquery-ui-layout/browse_thread/thread/4a7c6b09206045f2
2. http://www.secondpersonplural.ca/jqgriddocs/index.htm
3. http://layout.jquery-dev.net/documentation.cfm