jQuery Grid Plugin - jqGrid

Hi,

I have two grids on a page: gridA and gridB, both height: 200 and visible onload. What I like it to do are:

1) At least one grid must be shown at any time.

2) If one grid is hidden, the height of the other is doubled to cover the space given up.

Steps to reproduce the only problem encountered:

1) Hide gridA -> gridA is hidden, gridB height: 400

2) Hide gridB -> gridB is hidden, gridA height: 400

3) Unhide gridB -> gridA height: 200, gridB height: still 400!

OR

1) Hide gridB -> gridB is hidden, gridA height: 400

2) Hide gridA -> gridA is hidden, gridB height: 400

3) Unhide gridA -> gridB height: 200, gridA height: still 400!

Have I missed anything? The following function is called in onHeaderClick for both grids. sourceGrid is the grid where header is clicked, targetGrid is the other grid.

      function setGridHeight(sourceGrid, sourceGridState, targetGrid){
        if(sourceGridState == “hidden”){
          sourceGrid.jqGrid('setGridHeight', 200); // Not working!
          // Grid#1 is hidden, increase height of grid#2 and unhide it if needed.
          targetGrid.jqGrid('setGridHeight', 400);
          if(targetGrid.jqGrid('getGridParam', 'gridstate') == “hidden”)
            targetGrid.jqGrid('setGridState', “visible”);
        }
        else{
          // Unhide grid#1, reset height of both grids.
          sourceGrid.jqGrid('setGridHeight', 200); // Not working!
          targetGrid.jqGrid('setGridHeight', 200);
        }
      }

Please advise.. Thank you!!