The grid width and height should be set using CSS width and height styles. This can be done using pixels or percentages.
// set width using percentages <div id="myGrid" class="ag-fresh" style="width: 100%; height: 100%;"></div> // OR set width using fixed pixels <div id="myGrid" class="ag-fresh" style="width: 500px; height: 200px;"></div>
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 using all the space you think it should, 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 to solve outside of the grid.
If the width and / or height change after the grid is initialised, the grid will automatically resize to fill the new area.
The example below shows setting the grid size and then changing it as the user selects the buttons. Notice that the example calls api.doLayout() after the resize to avoid a flicker.
There is a property gridLayout which changes how the grid is laid into the DOM. By default the grid will have horizontal and vertical scrolls which will meet your needs 95 of the time. So don't change the gridLayout property unless you want one of the following:
Most applications will give the grid a fixed height and then the grid will provide vertical scrolls to navigate through the rows. This is the best way to view large data sets, as it allows the grid to only render rows that are currently visible on the screen. For example if you can only see 20 rows, then the grid will only render 20 rows, and as you scroll down, rows will be removed and new rows drawn.
Some applications will want to render all the rows in the grid and not use and scrolls inside the grid. This will give bad performance if many rows (ie if you render 10,000 rows into the DOM, your browser will probably crash!), however for 10 or 20 rows, this may be preferred.
To have the grid auto-size to fit the provided rows, set the property
The example below demonstrates the autoHeight feature. Notice the following:
The autoHeight will do a complete refresh of the grid rows after any sort, filter or row group open / close. This also means row animation will not work with autoHeight. This is because the autoHeight feature just places the rows into the DOM and lets the browser lay them out naturally. Under normal operation (when not using autoHeight) the grid explicitly positions the rows using top pixel location - which is needed for the animations to work.
The fullWidth feature, when used with autoHeight, will always embed the full width rows. This means if using fullWidth, the fullWidth rows will scroll horizontally with the other rows and if pinning, the fullWidth row will be split into the pinned sections.
It is not possible to specify a max height when using auto-height. It is also not possible to change the layout once the grid has initialised.
Browsers have a maximum height on divs that puts a hard limit on the number of rows that can be displayed. In Internet Explorer, this limit can be observed limiting the rows to 65,000 rows when on the main demo.
Currently ag-Grid has no way to extending this limit to allow viewing more rows simultaneously. However this is not a problem 99.99% of the time (the only people who this appears to be a problem with is system testers!!).
The reason this is not a problem is that normal human users don't scroll through tens of thousands of rows. Instead the grid will happily take the rows and then the user will use group / filter / sort to get to the data that they want.