Is it possible to make a slick grid control auto-size its height to between a min-max range to fit the number of rows?

user310988 picture user310988 · Aug 15, 2012 · Viewed 12.8k times · Source

I'm creating a website where a grid might have few rows or it might have many.

When there are only a few rows a lot of space is wasted in the grid on empty space.

Ideally I would like to be able to set a minimum height and a maximum height and then have the slick grid auto-size itself within that range based on the number of rows.

I've had a search around and found that there's an option for making the grid auto-size to the number of rows but it's apparently incompatible with paging.

var gridOptions = { autoHeight:true };

How to get slickgrid div to resize with size of table

It also seems you can't set a maximum height; it'll keep expanding until everything is displayed.

Does anyone have any solutions or suggestions?

Answer

ganeshk picture ganeshk · Aug 15, 2012

I think you need to adjust the height of the surrounding DIV instead of resizing the grid. SlickGrid's height is calculated based on the height of the DIV it is initialized on. So theoretically, you could modify the height of DIV based on the amount of data you have and then manually initialize the grid.

Check this link for an example on explicit init of the grid: http://mleibman.github.com/SlickGrid/examples/example-explicit-initialization.html

Hope this helps!