Master / Detail - Detail Height
This section shows how the detail height can be customised to suit application requirements.
Detail Height Options
The default height of each detail section (ie the row containing the Detail Grid in the master)
is fixed at
300px. The height does not change based on how much data there is to display in the detail
To change the height of the details section from the default you have the following options:
Fixed Height: a custom fixed height can be
provided for all detail sections instead of the default
- Auto Height: detail sections can auto-size to fit based off the contents.
- Dynamic Height: different heights can be provided for each detail section.
Use the grid property
detailRowHeight to set a fixed height for each detail row.
The following example sets a fixed row height for all detail rows.
detailCellRendererParams.autoHeight=true to have the detail grid to dynamically change
it's height to fit it's rows.
When using Auto Height feature, the Detail Grid will render all of it's rows all the time. Row Virtualisation will not happen. This means if the Detail Grid has many rows, it could slow down your application and could result in stalling he browser.
Do not use Auto Height if you have many rows (eg 100+) in the Detail Grid's. To know if this is a concern for your grid and dataset, try it out and check the performance.
Use the callback
getRowHeight() to set height for each row individually. This is a specific use
of the callback that is explained in more detail in
Get Row Height
Note that this callback gets called for all rows in the Master Grid, not just
rows containing Detail Grids. If you do not want to set row heights explicitly for
other rows simply return
undefined / null and the grid will ignore the
result for that particular row.
The following example demonstrates dynamic detail row heights: