Master Rows are the rows inside the Master Grid that can be expanded to display Detail Grids.
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 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.
is | 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. |
<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.
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:
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:
Clicking 'Remove' will: