React DataGrid - Master-Detail Interface
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".
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.
- import React from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, {
- MasterDetail
- } from 'devextreme-react/data-grid';
- const DetailSection = ({ data }) => {
- return (
- <div class="employeeInfo">
- <img class="employeePhoto" src={data.Picture} />
- <p class="employeeNotes">{data.Notes}</p>
- </div>
- );
- };
- export default function App() {
- return (
- <DataGrid ... >
- <MasterDetail
- enabled={true}
- autoExpandAll={true}
- render={DetailSection}
- />
- </DataGrid>
- );
- }
Once loaded, a detail section's content remains cached until a user switches to another page in the DataGrid or reloads the web page.
API
Pass -1 to the expandAll(groupIndex) or collapseAll(groupIndex) method to expand or collapse all master rows at once.
- import React, { useRef, useCallback } from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, { ... } from 'devextreme-react/data-grid';
- export default function App() {
- const dataGrid = useRef(null);
- const expandAllMasterRows = useCallback(() => {
- dataGrid.current.instance().expandAll(-1);
- }, []);
- const collapseAllMasterRows = useCallback(() => {
- dataGrid.current.instance().collapseAll(-1);
- }, []);
- return (
- <DataGrid ...
- ref={dataGrid}>
- {/* ... */}
- </DataGrid>
- );
- }
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.
- import React, { useRef, useCallback } from 'react';
- import 'devextreme/dist/css/dx.light.css';
- import DataGrid, { ... } from 'devextreme-react/data-grid';
- export default function App() {
- const dataGrid = useRef(null);
- const toggleMasterRow = useCallback((rowKey) => {
- if (dataGrid.current.instance().isRowExpanded(rowKey)) {
- dataGrid.current.instance().collapseRow(rowKey);
- } else {
- dataGrid.current.instance().expandRow(rowKey);
- }
- }, []);
- return (
- <DataGrid ...
- ref={dataGrid}>
- {/* ... */}
- </DataGrid>
- );
- }
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.
If you have technical questions, please create a support ticket in the DevExpress Support Center.