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

Question

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

If I set autoheight to say 5 rows, the table works correctly. When the 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, when I have a lot of data, this is a waste of space - I have 60% of the screen height for work, but only 5 lines are displayed at a time.

If I set autoheight to false, the resulting scrollbar is anchored 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 display as many rows as can fit and provide a scroll for the rest?

---- EDIT ----

Setting autoheight to false will be exactly what I want if the datagrid will resize with the parent when resizing my browser. Is there a good way to achieve this?

Answer 1

I think you are looking for grid.resize (); If you look at the “Grid.js.uncompressed.js” file in the dojox night files here: http://archive.dojotoolkit.org/nightly/dojotoolkit/dojox/grid/ You can see exactly what it does. DataGrid should inherit this method if you use it. One way to use it is to resize the containing div based on the height of the window, 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 way to choose is to do something like this:

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