Question

I’m using datagrids a lot for varying amounts of data, so have set autoHeight: true on them so the grid expands to the height of the data. However, if there is more data than can be shown on the screen at once, a scroll bar correctly appears on the window. Scrolling down means that the column headers will go off the top of the page.

With autoHeight false, in a hacky way, I can calculate the height of the page and set the grid’s height to an arbitrary value so the scroll bar appears on the grid, which means that the column headers are fixed. However, this is only good if the grid is full of data, otherwise the grid will still be full screen but only with a few rows of data – wasting screen real-estate.

Is there a way of combining both methods?

I’d like to be able to have a mode that will autoHeight the grid as it normally does if the entire grid can fit into the available space on the page. If it wouldn’t fit, I’d like it to fix the height of the grid to whatever remaining space is available, so that the data can be scrolled without losing the headers.

Does anyone know if this is possible?

Thanks very much,
Ed

Answer 1

I found a better, but still not ideal way round this.

Setting autoHeight to a numerical value limits the number of rows shown to that number, and importantly, if there are fewer than that number of rows in the store, the grid is still the correct size (i.e. it doesn’t occupy space for 20 rows if you set autoHeight: 20 and there are only 10 rows).

All that we as users have to do is work out how much space left we have on the screen, divide by the row height (which I think can be queried, or just guessed), and pass that into autoHeight. dojo.position() will help with working out the space left.

Cheers,
Ed