Master / Detail
Master Detail refers to a top level grid called a Master Grid having rows that expand. When the row is expanded, another grid is displayed with more details related to the expanded row. The grid that appears is known as the Detail Grid.
Enabling Master / Detail
Master / Detail can be enabled using the masterDetail
grid option with detail rows configured using
detailCellRendererParams
as shown below:
var gridOptions = {
// enable Master / Detail
masterDetail: true,
// the first Column is configured to use agGroupCellRenderer
columnDefs: [
{ field: 'name', cellRenderer: 'agGroupCellRenderer' },
{ field: 'account' }
},
// provide Detail Cell Renderer Params
detailCellRendererParams: {
// provide the Grid Options to use on the Detail Grid
detailGridOptions: {
columnDefs: [
{ field: 'callId' },
{ field: 'direction' },
{ field: 'number'}
]
},
// get the rows for each Detail Grid
getDetailRowData: function(params) {
params.successCallback(params.data.callRecords);
}
}
...
}
The example below shows a simple Master / Detail with all the above configured.
- Set the grid property
masterDetail=true
. This tells the grid to allow expanding rows to display Detail Grids. - Set the Cell Renderer on one Master Grid column to
agGroupCellRenderer
. This tells the grid to use the Group Cell Renderer which in turn includes the expand / collapse functionality for that column. - Set the Detail Cell Renderer* parameter
detailGridOptions
. This contains configuration for the Detail Grid such as what columns to display and what grid features you want enabled inside the Detail Grid. - Provide a callback via the Detail Cell Renderer* parameter
getDetailRowData
. The callback is called for each Detail Grid and sets the rows to display in each Detail Grid.
To learn more about detailCellRendererParams
configuration see the
Detail Grids section.
Row Models
When using Master / Detail the Master Grid must be using either the Client-Side or Server-Side Row Models. It is not supported with the Viewport or Infinite Row Models.
The Detail Grid on the other hand can use any Row Model.
API Reference
Master Detail Properties
Top level Master Detail properties available on the Grid Options:
masterDetail | Used to enable Master Detail. See Enabling Master Detail. Default: false |
detailCellRendererParams | Specifies the params to be used by the default detail Cell Renderer. See DetailDetail Grids. |
keepDetailRows | Set to true to keep detail rows for when they are displayed again.Default: false |
keepDetailRowsCount | Sets the number of details rows to keep. Default: 10 |
detailRowHeight | Set fixed height for each detail row. |
Detail Cell Renderer Params
Detail Cell Renderer parameters available on the detailCellRendererParams
object:
detailGridOptions | Provide Grid Options to use for the Detail Grid. It should be either an object (for once set of Grid Options for all Detail Grids) or a function (to set different Grid Options for different Detail Grids). |
getDetailRowData | A function that provides what rows to display in the Detail Grid. |
template | Allows changing the template used around the Detail Grid. |
refreshStrategy | Defines how to refresh the Detail Grids as data is changing in the Master Grid. |