Under normal usage, your application should set the width and height of the grid using CSS styles. The grid will then fit the width you provide and use scrolling inside the grid to allowing viewing all rows and columns.
Pitfall When Using Percent Width & Height
If using % for your height, then make sure the container you are putting the grid into also has height specified, as the browser will fit the div according to a percentage of the parents height, and if the parent has no height, then this % will always be zero.
If your grid is not the size you think it should be then put a border on the grid's div and see if that's the size you want (the grid will fill this div). If it is not the size you want, then you have a CSS layout issue in your application.
Changing Width and Height
If the width and / or height change after the grid is initialised, the grid will automatically resize to fill the new area.
Example: Setting and Changing Grid Width and Height
The example below shows setting the grid size and then changing it as the user selects the buttons.
Grid Auto Height
Depending on your scenario, you may wish for the grid to auto-size it's height to the number of rows displayed inside the grid. This is useful if you have relatively few rows and don't want empty space between the last row and the bottom of the grid.
To allow the grid to auto-size it's height to fit rows, set grid property
domLayout='autoHeight' then your application should not set height
on the grid div, as the div should be allowed flow naturally to fit the grid contents.
When auto height is off then your application should
set height on the grid div, as the grid will fill the div you provide it.
Don't use Grid Auto Height when displaying large numbers of rows.
If using Grid Auto Height, then the grid will render all rows into the DOM. This is different to normal operation where the grid will only render rows that are visible inside the grid's scrollable viewport. For large grids (eg >1,000 rows) the draw time of the grid will be slow, or for very large grids, your application can freeze. This is not a problem with the grid, it is a limitation on browsers on how much data they can easily display on one web page. For this reason, if showing large amounts of data, it is not adviseable to use Grid Auto Height. Instead use the grid as normal and the grid's row virtualisation will take care of this problem for you.
The example below demonstrates the autoHeight feature. Notice the following:
- As you set different numbers of rows into the grid, the grid will resize it's height to just fit the rows.
- As the grid height exceeds the height of the browser, you will need to use the browser vertical scroll to view data (or the iFrames scroll if you are looking at the example embedded below).
- The height will also adjust as you filter, to add and remove rows.
- If you have pinned rows, the grid will size to accommodate the pinned rows.
- Vertical scrolling will not happen, however horizontal scrolling, including pinned columns, will work as normal.
It is possible to move the grid into and out of 'full height' mode by using the
api.setDomLayout()or by changing the bound property
There are three DOM Layout values the grid can have 'normal', 'autoHeight' and 'print'. They are used as follows:
- normal: This is the default if nothing is specified. The grid fits the width and height of the div you provide and scrolls in both directions.
- autoHeight: The grid's height is set to fit the number of rows so no vertical scrollbar is provided by the grid. The grid scrolls horizontally as normal.
- print: No scroll bars are used and the grid renders all rows and columns. This layout is explained in Printing.
Min Height with Auto Height
There is a minimum height of 50px for displaying the rows for autoheight. This is for aesthetic purposes, in particular to allow room to show the 'no rows' message when no rows are in the grid otherwise this message would be overlaying on top of the header which does not look well.
It is not possible to specify a max height when using auto-height.