Automatically Resize dojo dijit.Grid widget when it's parent container resizes

Question

I have a dojo Grid widget inside a TitlePane with it's width set to 100%.

The TitlePane is in a liquid layout so it's width changes with the browser window size. The problem I am having is that when the parent window expands (or contracts) the grid itself does not change it's width. I can get it to resize itself by calling render() on the grid, but how can I detect that the parent window has resized so that I know to redraw the grid widget?

Answer 1

I've had to do this on occasion; it's not too tough:

function resizeGrid() {
   // do whatever you need here, e.g.:
   myGrid.resize();
   myGrid.update();
}

dojo.addOnLoad(function() {
   dojo.connect(window, "onresize", resizeGrid);
});

Answer 2

I have the same kind of problem. I tried a solution similar to Ryan Corradini's.

It is only OK for first display. If I change the window size, the resize function is correctly called, but the grid's size stays unchanged.

Please note my particular conditions: in the resize function, I have to set the height attribute of the grid (resize+update only seems not enough).

HTML looks like :

<div id="msgItems" dojoType="dijit.layout.ContentPane" region="center"
 style="padding:2px;">
<form id="msgDefForm" name="msgDefForm" dojoType="dijit.form.Form">
<div style="display:none;"><input type="text" name="msgName" id="msgName" dojoType="dijit.form.TextBox"></input>
</div>

<table dojoType="dojox.grid.DataGrid" jsId="msgGrid" id="msgGrid"
rowsPerPage="10" rowSelector="5px" singleClickEdit="false" loadingMessage="Loading message content"  
errorMessage="Error while loading the message content" selectable="true"  >
  <thead>
    <tr>
      <th field="zone" width="8em" cellType="dojox.grid.cells.Select" options="properties, values" editable="true">Zone</th>
      <th field="property" width="auto" editable="true">Property</th>
      <th field="value" width="auto" editable="true">Value</th>
    </tr>
  </thead>
</table>

</form>
</div>

JS looks like :

... in startOnLoad :
dojo.connect( window, "onresize", msgGridResized);
msgGridResized ();
...

function msgGridResized () {
    var cont = dojo.byId("msgItems")
    var h = cont.clientHeight - 4;
    if (h >= 0){
        var grd = dijit.byId("msgGrid");
        grd.attr("height", h+"px" );
        grd.resize();
        grd.update();
    }
}

Answer 3

Haven't got time to try this out for you but can't you just dojo.connect to the TitlePane's resize event and in the handler resize the grid or set the size of the grid using percentages in the declaration/markup?

Answer 4

You can try with this code:

grid.resize({ w: 400, h: 400 });

If you want to be a bit more general:

var parentDiv = dom.byId('parentDiv');
grid.resize({ w: parentDiv.clientWidth, h: parentDiv.clientHeight });

refer to: Dojo DataGrid height resize not working

Hope it work for you