Vue Data GridMaster / Detail - Master Rows

Master Rows are the rows inside the Master Grid that can be expanded to display Detail Grids.

Static Master Rows Copy Link

Once a Master Grid is configured with masterDetail=true, all rows in the Master Grid behave as Master Rows, in that they can be expanded to display Detail Grids.

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

// by itself, all rows will be expandable
this.masterDetail = true;

Because Static Master Rows are used in all the basic examples of Master / Detail, another example is not given here.

Dynamic Master Rows Copy Link

Dynamic Master Rows allows specifically deciding what rows in the Master Grid can be expanded. This can be useful if, for example, a Master Row has no child records, then it may not be desirable to allow expanding the Master Row.

To specify which rows should expand, provide the grid callback isRowMaster. The callback will be called once for each row. Return true to allow expanding and false to disallow expanding for that row.

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

// turn on master detail
this.masterDetail = true;

// specify which rows to expand
this.isRowMaster = dataItem => {
    return expandThisRow ? true : false;
};

The following example only shows detail rows when there are corresponding child records.

Changing Dynamic Master Rows Copy Link

The callback isRowMaster is re-called after data changes in the row as a result of a Transaction Update. This gives the opportunity to change whether the row is expandable or not.

// to get isRowMaster called again, update the row using a Transaction Update
const transaction = { update: [ updatedRecord1, updatedRecord2 ] };
gridApi.applyTransaction(transaction);

In the example below, only Master Rows that have data to show are expandable. Note the following:

• Row 'Nora Thomas' has no detail records, thus is not expandable.
• Row 'Mila Smith' has detail records, thus is expandable.
• Clicking 'Clear Mila Calls' removes detail records from Mila Smith which results in the Mila Smith row no longer being a Master Row.
• Clicking 'Set Mila Calls' sets detail records from Mila Smith which results in the Mila Smith becoming a Master Row.

The example below extends the previous example. It demonstrates a common scenario of the Master Row controlling the Detail Rows. Note the following:

• Each Master Row has buttons to add or remove one detail row.

• Clicking 'Add' will:

  • Add one detail row.
  • Ensure the Master Row is expandable.
  • Ensure the Master Row is expanded (i.e. the Detail Grid is visible).

• Clicking 'Remove' will:

  • Remove one detail row.
  • If no detail rows exist, ensure Master Row is not expandable

Opening Master Rows by Default Copy Link

Master Rows can be expanded by default using either masterDefaultExpanded or isMasterOpenByDefault.

Set masterDefaultExpanded to the number of levels of Master Rows to expand by default, or -1 to expand all Master Rows. If not set, it falls back to groupDefaultExpanded.

const gridOptions = {
    // expand all master rows by default
    masterDefaultExpanded: -1,
};

For finer control, provide the isMasterOpenByDefault callback. It is called once for each Master Row; return true to expand that row by default.

const gridOptions = {
    // expand specific master rows by default
    isMasterOpenByDefault: (params) => {
        return params.data.shouldExpand;
    },
};