Results:
Loading...
Javascript Data GridJavascriptReact Data GridReactAngular Data GridAngularVue Data GridVue

Angular Data GridMaster / Detail - Master RowsEnterprise

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

Static Master Rows

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-angular
    [masterDetail]="masterDetail"
    /* other grid options ... */>
</ag-grid-angular>

// 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

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.

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.
isRowMaster: IsRowMaster<TData>;

interface IsRowMaster<TData = any> {
    (dataItem: TData) : boolean
}
<ag-grid-angular
    [masterDetail]="masterDetail"
    [isRowMaster]="isRowMaster"
    /* other grid options ... */>
</ag-grid-angular>

// 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

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