JavaScript Data Grid

Master / Detail

javascript logo
Enterprise

Enabling Master / Detail

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

const 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: params => {
            params.successCallback(params.data.callRecords);
        }
    },

    // other grid options ...
}

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: