Is it possible to have Dojo/Dijit DataGrid autoheight functionality based on the parent div size instead of a number of rows?

Question

I have a datagrid that is updated periodically and the number of rows inside it grows steadily over time. It is inside of a parent div with a height of 60% of the screen.

If I set autoheight to, say, 5 rows, the table works properly. When a sixth row is added, a scrollbar appears within the datagrid and I can scroll up/down and the headers remain fixed at the top and visible. Unfortunately, once I have a lot of data, this is a waste of space -- I have 60% of the screen's height to work with, but only 5 rows are being shown at a time.

If I set autoheight to false, the scrollbar that appears is attached to the parent div. Scrolling up/down allows me to see the data, but the headers at the top of the grid scroll out of view.

Is there a way to ask the datagrid to show as many rows as it can fit and provide a scrollbar for the rest?

---- EDIT ----

Setting autoheight to false would be exactly what I want if the datagrid would resize itself along with the parent when I resize my browser. Is there a good way to achieve that?

Answer 1

I think you're looking for grid.resize(); If you look at the file "Grid.js.uncompressed.js" in the dojox nightly files here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/ You can see exactly what it does. The dataGrid should inherit this method, if you're using it. One way to use it is to resize the containing div based on the window's height, and then resize the grid inside:

function changeHeight() {
    document.getElementById("div Id in which the dojo grid is there").style.height ="your desired height";
    dijit.byId('Id of the dojo grid').resize();
    dijit.byId('Id of the dojo grid').update();
}

Another option method is do do something like this:

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

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