Angular Data GridMaster / Detail

Enterprise

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.

Master / Detail Video Tutorial thumbnail

Enabling Master / Detail

Master / Detail can be enabled using the masterDetail grid option with detail rows configured using detailCellRendererParams as shown below:

<ag-grid-angular
    [masterDetail]="masterDetail"
    [columnDefs]="columnDefs"
    [detailCellRendererParams]="detailCellRendererParams"
    /* other grid options ... */ />

// enable Master / Detail
this.masterDetail = true;

// the first Column is configured to use agGroupCellRenderer
this.columnDefs = [
    { field: 'name', cellRenderer: 'agGroupCellRenderer' },
    { field: 'account' }
];

// provide Detail Cell Renderer Params
this.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: params => {
        params.successCallback(params.data.callRecords);
    }
};

The example below shows a simple Master / Detail with all the above configured.

  1. The grid property masterDetail=true is set. This tells the grid to allow expanding rows to display Detail Grids.

  2. The Cell Renderer on the first column in the Master Grid is set to agGroupCellRenderer. This tells the grid to use the Group Cell Renderer which in turn includes the expand / collapse functionality for that column.

  3. The Detail Cell Renderer parameter detailGridOptions is set. This contains configuration for the Detail Grid, such as which columns to display and which grid features to enable inside the Detail Grid.

  4. A callback is provided via the Detail Cell Renderer parameter getDetailRowData. This 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
boolean
default: false
Set to true to enable Master Detail.
isRowMaster
IsRowMaster
Callback to be used with Master Detail to determine if a row should be a master row. If false is returned no detail row will exist for this row.
detailCellRenderer
any
Provide a custom detailCellRenderer to use when a master row is expanded.
detailCellRendererParams
any
Specifies the params to be used by the Detail Cell Renderer. Can also be a function that provides the params to enable dynamic definitions of the params.
detailRowHeight
number
Set fixed height in pixels for each detail row.
detailRowAutoHeight
boolean
Set to true to have the detail grid dynamically change it's height to fit it's rows.
embedFullWidthRows
boolean
Set to true to have the Full Width Rows embedded in grid's main container so they can be scrolled horizontally.
keepDetailRows
boolean
default: false
Set to true to keep detail rows for when they are displayed again.
keepDetailRowsCount
number
default: 10
Sets the number of details rows to keep.

Detail Cell Renderer Params

Detail Cell Renderer parameters available on the detailCellRendererParams object:

Properties available on the IDetailCellRendererParams<TData = any, TDetail = any> interface.

detailGridOptions
Provide Grid Options to use for the Detail Grid.
getDetailRowData
GetDetailRowData<TData, TDetail>
A function that provides what rows to display in the Detail Grid.
refreshStrategy
'rows' | 'everything' | 'nothing'
Defines how to refresh the Detail Grids as data is changing in the Master Grid.
template
string | TemplateFunc
Allows changing the template used around the Detail Grid.