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 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/

Solution 1

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

Solution 2

I'm using jqgrid 4.0 (via jquery struts 2 plugin) and jQuery layout plugin. The previous answer doesn't work for me. Only the function resizeGrid was a problem though. Just replace the resizeGrid function above with this. This will only resize one grid - the one whose id is gridtable.

function resizeGrid(pane, $Pane, paneState) {
    jQuery("#gridtable").jqGrid('setGridWidth',paneState.innerWidth - 2, 'true');
};

#gridtable is the id of the table element you create for jqgrid

<div id="grid_container">
  <table id="gridtable" class="mygrid"></table>
  <div id="grid_pgr"></div>
</div>

Also, if you are using the jquery struts2 plugin, the grid is automatically generated using < script > blocks within the < body > (not in script blocks within < head >). So, if you called layout() and set triggerEventsOnLoad: true in < head >, you get a javascript error. To avoid this, you can add this script block somewhere after your grid(s) is declared.

<script type="text/javascript">
jQuery(document).ready(function () {
    jQuery("#gridtable").jqGrid('setGridWidth',$myLayout.state.center.innerWidth - 2, 'true');
});
</script>

If you have more than one grid, you can access them using a class you have defined on the table element (see html snippet above), and then run the resizeGrid method on each of them.

Solution 3

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

Comments

[Horacio]

Thanks, this lead me to the answer I needed.

[Murali Murugesan]

@JustinEthier how do we make this as a fluid grid like twitter bootstrap table. example here 192.69.216.111/themes/preview/ace/tables.html

[JGV]

The link provided by Murali seems to be broken now. Can you update the link? I am interested to see how his solution works.