Automatically resize dojo dijit.Grid widget when resizing parent container

Question

I have a dojo Grid widget inside a TitlePane element with its width set to 100%.

TitlePane is in the liquid layout, so its width changes with the size of the browser window. The problem I am facing is that when the parent window expands (or contracts), the grid itself does not change its width. I can make it resize by calling render () on the grid, but how can I determine if the size of the parent window has changed so that I know that I need to redraw the grid widget?

Answer 1

I had to do it sometimes; it's not too complicated:

function resizeGrid() { // do whatever you need here, eg: myGrid.resize(); myGrid.update(); } dojo.addOnLoad(function() { dojo.connect(window, "onresize", resizeGrid); }); 

Answer 2

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

This is normal for the first display. If I resize the window, the resize function will be called correctly, but the grid size will remain unchanged.

Pay attention to my special conditions: in the resize function, I need to set the grid height attribute (resizing + updating seems insufficient).

HTML looks like this:

 <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 this:

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

You don’t have time to try this for you, but you can’t just dojo. Contact the TitlePane resize event, and in the handler change the grid size or set the grid size using percentages in the ad / layout?

Answer 4

You can try with this code:

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

If you want to be more general:

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

refer to: Dojo Changing the height of a DataGrid does not work

Hope it works for you.