Angular DataGrid - Master-Detail Interface

Watch Video

NOTE
You must specify the DataGrid's keyExpr or the Store's key property to ensure that the master-detail interface works properly.
See Also

User Interaction

The master-detail interface supplies a standard data row with an expandable section that contains detail data. In master-detail terms, the data row is called "master row" and the expandable section - "detail section".

DevExtreme HTML5/JavaScript DataGrid UI component Master Detail Interface

The master-detail interface becomes available after you specify the detail sections' contents using the masterDetail.template property. You can expand and collapse detail sections programmatically or enable a user to do it by setting the masterDetail.enabled property to true. Set the masterDetail.autoExpandAll property to true to expand these sections by default.

HTML
TypeScript
  • <dx-data-grid ... >
  • <dxo-master-detail
  • [enabled]="true"
  • [autoExpandAll]="true"
  • [template]="'detail'">
  • </dxo-master-detail>
  • <div *dxTemplate="let employee of 'detail'">
  • <div class="employeeInfo">
  • <img class="employeePhoto" [src]="employee.data.Picture" />
  • <p class="employeeNotes">{{employee.data.Notes}}</p>
  • </div>
  • </div>
  • </dx-data-grid>
  • import { DxDataGridModule } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • // ...
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDataGridModule
  • ],
  • // ...
  • })

Once loaded, a detail section's content remains cached until a user switches to another page in the DataGrid or reloads the web page.

View Demo

API

Pass -1 to the expandAll(groupIndex) or collapseAll(groupIndex) method to expand or collapse all master rows at once.

TypeScript
  • import { ..., ViewChild } from "@angular/core";
  • import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
  • expandAllMasterRows () {
  • this.dataGrid.instance.expandAll(-1);
  • }
  • collapseAllMasterRows () {
  • this.dataGrid.instance.collapseAll(-1);
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDataGridModule
  • ],
  • // ...
  • })

The expandRow(key) and collapseRow(key) methods expand and collapse an individual master row. You can check a row's current state by calling the isRowExpanded(key) method.

TypeScript
  • import { ..., ViewChild } from "@angular/core";
  • import { DxDataGridModule, DxDataGridComponent } from "devextreme-angular";
  • // ...
  • export class AppComponent {
  • @ViewChild(DxDataGridComponent, { static: false }) dataGrid: DxDataGridComponent;
  • // Prior to Angular 8
  • // @ViewChild(DxDataGridComponent) dataGrid: DxDataGridComponent;
  • toggleMasterRow (rowKey) {
  • if (this.dataGrid.instance.isRowExpanded(rowKey)) {
  • this.dataGrid.instance.collapseRow(rowKey);
  • } else {
  • this.dataGrid.instance.expandRow(rowKey);
  • }
  • }
  • }
  • @NgModule({
  • imports: [
  • // ...
  • DxDataGridModule
  • ],
  • // ...
  • })

View Demo

Events

Events raised for a master row when a user expands or collapses it are identical to the events raised for expanding or collapsing a group. See this topic for details.