Vue Data GridSSRM Master Detail

This section shows how the Server-Side Row Model can be configured with a Master / Detail view.

The ability to nest grids within grids is commonly referred to as Master / Detail. Here the top-level grid is referred to as the 'master grid' and the nested grid is referred to as the 'detail grid'.

Master / Details is configured the same way for the Server-Side Row Model and the Client-Side Row Model. For a comprehensive look at Master / Detail configurations, see: Client-Side Master / Detail.

Because the configuration is already discussed in Client-Side Master / Detail, this page focuses on areas that are of particular interest to this Server-Side version.

Enabling Master / Detail

To enable Master / Detail, you should set the following grid options:

• masterDetail: Set to true to inform the grid you want to allow expanding of rows to reveal detail grids.
• detailGridOptions: The grid options to set for the detail grid. The detail grid is a fully featured instance of AG Grid, so any configuration can be set on it that you would set on any other grid.
• getDetailRowData: A function you implement to provide the grid with rows for display in the detail grids.

These grid options are illustrated below:

<ag-grid-vue
    :columnDefs="columnDefs"
    :rowModelType="rowModelType"
    :masterDetail="masterDetail"
    :detailCellRendererParams="detailCellRendererParams"
    /* other grid options ... */>
</ag-grid-vue>

// master grid columns
this.columnDefs = [];

// use the server-side row model
this.rowModelType = 'serverSide';

// enable master detail
this.masterDetail = true;

this.detailCellRendererParams = {
    detailGridOptions: {
        // detail grid columns
        columnDefs: [],
    },
    getDetailRowData: params => {
        // supply data to the detail grid
        params.successCallback(params.data);
    }
};

Example: Infinite Scrolling with Master / Detail

This example shows a simple Master / Detail with the Server-Side Row Model. From this example notice the following:

• masterDetail - is set to true in the master grid options.
• detailCellRendererParams - specifies the detailGridOptions to use and getDetailRowData extracts the data for the detail row.
• cellRenderer: 'agGroupCellRenderer' - is used to provide expand / collapse icons on the master rows.

Combining Row Grouping with Master Detail

It is possible to combine Server-Side Grouping with Master Detail.

The following snippet shows row grouping on the 'country' column by setting rowGroup = true:

this.columnDefs = [
    { field: 'country', rowGroup: true },

    // more column definitions
];

Example: Row Grouping with Master Detail

Below shows Row Grouping combined with Master / Detail. From the example you can notice the following:

• rowGroup - is set to true on the 'country' column definition.
• masterDetail - is set to true to enable Master / Detail.
• detailCellRendererParams - specifies the detailGridOptions to use and getDetailRowData extracts the data for the detail row.
• autoGroupColumnDef - is used to specify which column in the master row should be included in the group hierarchy.

Expanding Master Rows

Normally parent rows (groups) can be expanded and child rows cannot be expanded (unless they are themselves parents). This means that normally only parent rows have expand / collapse icons.

For Master / Detail, expand and collapse icons are also needed at the master level. When doing Master / Detail, expand and collapse icons are also needed to expand the child rows where those rows are also master rows.

Rather than use the autoGroupColumnDef for the master rows as shown in the example above, simply specify a group cell renderer on the column that should show the expand / collapse icons.

This is shown in the code snippet below:

this.columnDefs = [
    { field: 'country', rowGroup: true },
    { field: 'accountId', maxWidth: 200, cellRenderer: 'agGroupCellRenderer' },

    // more column definitions
];

Detail Row Height

The height of detail rows can be configured in one of the following ways:

1. Using the detailRowHeight grid option property to set a fixed height for each detail row.
2. Using the getRowHeight() grid option callback to explicitly set height for each row individually. This callback will need to work out the pixel height of each detail row.
3. Using the detailRowAutoHeight=true property to let the grid automatically size the detail rows / grids to fit their rows.

The following snippets compares these approaches:

Option 1 - fixed detail row height, sets height for all details rows

<ag-grid-vue
    :detailRowHeight="detailRowHeight"
    /* other grid options ... */>
</ag-grid-vue>

this.detailRowHeight = 500;

Option 2 - dynamic detail row height, dynamically sets height for all rows

<ag-grid-vue
    :getRowHeight="getRowHeight"
    /* other grid options ... */>
</ag-grid-vue>

this.getRowHeight = params => {
    const isDetailRow = params.node.detail;

    // not that this callback gets called for all rows, not just the detail row
    if (isDetailRow) {
        // dynamically calculate detail row height
        return params.data.children.length * 50;
    }
    // for all non-detail rows, return 25, the default row height
    return 25;
};

Option 3 - use autoHeight

<ag-grid-vue
    :detailCellRendererParams="detailCellRendererParams"
    /* other grid options ... */>
</ag-grid-vue>

this.detailCellRendererParams = {
    autoHeight: true,
};

Example Using Callback getRowHeight()

The following example explicitly sets detail row heights based on the number of detail rows. Note the following:

• getRowHeight() - is implemented to size detail rows according to the number of records.
• node.detail - is used to identify 'detail' row nodes.

See Master Detail Dynamic Height for more details.

Example Using Property autoHeight

The following example gets the grid to auto-size all details sections to fit their rows. This is done by setting masterGridOptions.detailRowAutoHeight = true.

See Master Detail Auto Height for more details.

Lazy Loading Detail Rows

In the examples above, the data for the detail grid was returned with the master row. However it is also possible to lazy-load data for the detail row, see: Providing Rows.

However note that detail rows will be purged once the master row is closed, or if the detail row leaves the viewport through scrolling. In both cases data will need to be fetched again.

Next Up

Continue to the next section to learn how to work with Tree Data.