DevExtreme Vue - Master-Detail Interface

Watch Video

NOTE
You must specify the DataGrid's keyExpr or the Store's key option 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 Widget Master Detail Interface

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

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.

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.

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.