Master / Detail allows you to nest grids inside grids. The top level grid is referred to as the 'master grid'. The nested grid is referred to as the 'detail grid'. Typically the detail grid gives more information about the row in the master grid that was expanded to reveal the detail grid.
To enable Master / Detail, you should set the following grid options:
These grid options are illustrated below:
Below shows a simple Master / Detail setup. From the example you can notice the following:
truein the master grid options.
detailGridOptionsto use and
getDetailRowDataextracts the data for the detail row.
The template used by default detail Cell Renderer can be overridden with a user defined template. This is a convenient way to provide custom layouts and styles to the detail rows.
There are two ways to achieve this:
detailCellRendererParams.templateproperty as shown below:
The template must contain an element with attribute
This element is used to host the detail grid instance.
The follow examples demonstrate both approaches.
This examples demonstrates a static string template which is supplied to the
property to customise the layout and background colour.
A template callback function is supplied to the
detailCellRendererParams.template property to customise
the layout and background colour. It additionally adds the name from the master row using the data supplied via callback parameters.
The previous section described how to override the detail template used in the default Cell Renderer, however it is also possible to provide a custom detail Cell Renderer Component. This approach provides more flexibility but is more difficult to implement as you have to provide your own customer detail cell renderer. Use this approach if you want to add additional functionality to the detail panel that cannot be done by simply changing the template.
To supply a custom detail Cell Renderer instead of using the default use:
The following examples demonstrate custom Cell Renderer components for the detail row with and without a grid.
This example demonstrates how to embeds a grid into the detail row using a custom Cell Renderer component:
This example demonstrates a custom Cell Renderer Component that uses a form rather than a grid:
You can access the API of all detail grids via the master grid. The API for each detail grid
is stored in a
DetailGridInfo object that has the following properties:
DetailGridInfo is accessed via the
GridApi of the master
gridOptions. You can either reference a particular detail grid API by ID,
or loop through all the existing detail grid API's.
This example shows how to control cell editing when using Master / Detail. This examples demonstrates the following:
masterGridOptions.api.forEachNodeand then calls
masterGridOptions.api.stopEditing()on each node.
masterGridOptions.api.getDetailGridInfo()and then uses the grid api on that detail grid start editing:
masterGridOptions.api.forEachDetailGridInfo()and then calls
detailGridApi.api.stopEditing()on each detail grid.
It certain cases it may be required to not treat all top level rows as a master rows. For instance if a master has no child records it may not be desirable to expand the master row to an empty detail.
In order to prevent this the following callback can be used on the master grid options:
As shown above our callback function will return
true when there are detail (i.e. children) records,
otherwise it will return
The following example only shows detail rows when there are corresponding child records.
It is possible to nest Master / Detail grids. There are no special configurations required to achieve this, you just configure another detail grid inside the first detail grid.
The following snippet illustrates how to achieve nesting via successive grid option configurations:
Below shows a contrived master detail setup to help illustrate how nesting can be achieved. The example has very little data - this is on purpose to focus on the nesting.
The height of detail rows can be configured in one of the following two ways:
detailRowHeightto set a fixed height for each detail row.
getRowHeight()to set height for each row individually. One extra complication here is that this method is called for every row in the grid including master rows.
The following snippet compares both approaches:
Note that the
detail property can be used to identify detail rows.
The following examples demonstrate both approaches:
The following demonstrates a fixed detail row height:
The following example demonstrates dynamic detail row heights:
There are no specific configurations for filtering and sorting with Master / Detail but as there are multiple grids each grid will filter and sort independently.
Below shows a simple Master / Detail setup which has filtering and sorting enabled in both master and detail grids.
It is possible to lazy load detail row data as it becomes available. For instance an asynchronous request could be sent when expanding a master row to fetch detail records.
The following snippet illustrates this using a simple
setTimeout() function to delay supplying
data to the detail row after a fixed timeout.
Note that the key to this approach is the
params.successCallback(data) function provided via the params, which can
be invoked later or asynchronously once the data for the detail row is available.
Below shows a simple Master / Detail setup which uses
setTimeout() to simulate lazying loading of data
in the detail rows:
The Master / Detail feature organises the grid in a way which overlaps with other features. For example, Master / Detail expands rows, which is also the case with row grouping or enterprise row model. For this reason, Master / Detail does not work with certain grid configurations. These configurations are listed below.
The master grid (i.e. the top level grid) in Master / Detail can only be using the In Memory row model. It is not supported with Enterprise, Viewport or Infinite row models. This is because all of these row models have their own unique way of loading data which would clash with the workings on master detail.
The detail grid (i.e. the child grid) can use any of the row models. Thus as long as the master grid uses In Memory, then the detail grid can use any of the other row models.
The reason for this is that the row expand and collapse is either not support (viewport and infinite row models) or has a different meaning (enterprise row model loads more rows when you expand).
Master / Detail is not supported with Tree Data. This is because the concept of tree data conflicts with Master / Detail, in that in tree data, any row can expand to show child rows, which would result in a clash when a row has child rows in addition to having Master / Detail at the same row.
It is not possible to mix DOM layout for master detail. This is because the layout is a CSS setting that would be inherited by all grids contained with the master grid. So if your master grid was 'for-print', then all child grids would pick up the 'for-print' layout.
When using Master / Detail and for-print, then all detail grids need to use for-print.
When using Master / Detail and auto-height, then all detail grids need to use auto-height.