Make jqGrid fill its 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 compl

Answer 1

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