React Data Grid - Advanced Master-Detail View

This demo illustrates an advanced master-detail view in the DataGrid component. Master rows represent suppliers. Detail sections contain TabPanel components with two tabs: Orders and Address. In the Orders tab, you can choose a supplier's product from the SelectBox, and the DataGrid under it will show orders placed on this product. The Address tab displays the supplier's address.

TS JS

Backend API

import React from 'react'; import { Column, DataGrid, MasterDetail, Paging, Pager, } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import MasterDetailView from './MasterDetailView.tsx'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; const suppliersData = createStore({ key: 'SupplierID', loadUrl: `${url}/GetSuppliers`, }); const App = () => ( <DataGrid dataSource={suppliersData} remoteOperations={true} showBorders={true} id="gridContainer" > <MasterDetail enabled={true} component={MasterDetailView} /> <Paging defaultPageSize={15} /> <Pager visible={true} /> <Column dataField="ContactName" /> <Column dataField="ContactTitle" /> <Column dataField="CompanyName" /> <Column dataField="City" /> <Column dataField="Country" /> </DataGrid> ); export default App;

import React from 'react'; import { Column, DataGrid, MasterDetail, Paging, Pager, } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import MasterDetailView from './MasterDetailView.js'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; const suppliersData = createStore({ key: 'SupplierID', loadUrl: `${url}/GetSuppliers`, }); const App = () => ( <DataGrid dataSource={suppliersData} remoteOperations={true} showBorders={true} id="gridContainer" > <MasterDetail enabled={true} component={MasterDetailView} /> <Paging defaultPageSize={15} /> <Pager visible={true} /> <Column dataField="ContactName" /> <Column dataField="ContactTitle" /> <Column dataField="CompanyName" /> <Column dataField="City" /> <Column dataField="Country" /> </DataGrid> ); export default App;

import React from 'react'; import { Form, Item } from 'devextreme-react/form'; const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone']; const renderFormItem = (item) => ( <span>{item.editorOptions.value}</span> ); interface AddressTabProps { data: any; } const AddressTab = (props: AddressTabProps) => ( <Form formData={props.data} colCount={2} className="address-form form-container" > { items.map((item, index) => <Item dataField={item} key={index} render={renderFormItem} />) } </Form> ); export default AddressTab;

import React, { useCallback } from 'react'; import { TabPanel, Item } from 'devextreme-react/tab-panel'; import { type DataGridTypes } from 'devextreme-react/data-grid'; import AddressTab from './AddressTab.tsx'; import OrdersTab from './OrdersTab.tsx'; const MasterDetailView = (props: DataGridTypes.MasterDetailTemplateData) => { const renderOrdersTab = useCallback(() => ( <OrdersTab supplierId={props.data.key} /> ), [props.data.key]); const renderAddressTab = useCallback(() => ( <AddressTab data={props.data.data} /> ), [props.data.data]); return ( <TabPanel> <Item title="Orders" render={renderOrdersTab} /> <Item title="Address" render={renderAddressTab} /> </TabPanel> ); }; export default MasterDetailView;

import React, { useEffect, useState } from 'react'; import { Column, DataGrid, Paging, Summary, TotalItem, ValueFormat, } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; interface OrderHistoryProps { productId: any; } const OrderHistory = ({ productId }: OrderHistoryProps) => { const [orderHistoryStore, setOrderHistoryStore] = useState(null); useEffect(() => { if (productId) { const newOrderHistoryStore = createStore({ key: 'OrderID', loadParams: { ProductID: productId }, loadUrl: `${url}/GetOrdersByProduct`, }); setOrderHistoryStore(newOrderHistoryStore); } }, [productId]); return ( <DataGrid dataSource={orderHistoryStore} showBorders={true} > <Paging defaultPageSize={5} /> <Column dataField="OrderID" /> <Column dataField="OrderDate" dataType="date" /> <Column dataField="ShipCountry" /> <Column dataField="ShipCity" /> <Column dataField="UnitPrice" format="currency" /> <Column dataField="Quantity" /> <Column dataField="Discount" format="percent" /> <Summary> <TotalItem column="UnitPrice" summaryType="sum"> <ValueFormat precision={2} /> </TotalItem> <TotalItem column="Quantity" summaryType="count" /> </Summary> </DataGrid> ); }; export default OrderHistory;

import React, { useCallback, useState } from 'react'; import { Form, Item, Label } from 'devextreme-react/form'; import ProductSelectBox from './ProductSelectBox.tsx'; import OrderHistory from './OrderHistory.tsx'; interface OrdersTabProps { supplierId: any; } const OrdersTab = (props: OrdersTabProps) => { const [chosenProductId, setChosenProductId] = useState(null); const renderSelectBox = useCallback(() => ( <ProductSelectBox supplierId={props.supplierId} productId={chosenProductId} onProductChanged={setChosenProductId} /> ), [chosenProductId, props.supplierId]); const renderOrderHistory = useCallback(() => ( <OrderHistory productId={chosenProductId} /> ), [chosenProductId]); return ( <Form labelLocation="top" className="form-container" > <Item render={renderSelectBox}> <Label text="Product" /> </Item> <Item render={renderOrderHistory}> <Label text="Order History" /> </Item> </Form> ); }; export default OrdersTab;

import React, { useCallback, useEffect, useState } from 'react'; import { SelectBox, type SelectBoxTypes } from 'devextreme-react/select-box'; import { createStore } from 'devextreme-aspnet-data-nojquery'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; const productLabel = { 'aria-label': 'Product' }; interface ProductSelectBoxProps { supplierId: any; productId: any; onProductChanged: any; } const ProductSelectBox = (props: ProductSelectBoxProps) => { const [productsData, setProductsData] = useState(null); const valueChanged = useCallback((e: SelectBoxTypes.ValueChangedEvent) => { props.onProductChanged(e.value); }, [props]); useEffect(() => { const setDefaultValue = (items: any[]) => { const firstItem = items[0]; if (firstItem && props.productId === null) { props.onProductChanged(firstItem.ProductID); } }; const newProductsData = createStore({ key: 'ProductID', loadParams: { SupplierID: props.supplierId }, loadUrl: `${url}/GetProductsBySupplier`, onLoaded: setDefaultValue, }); setProductsData(newProductsData); }, [props]); return ( <SelectBox value={props.productId} deferRendering={false} inputAttr={productLabel} dataSource={productsData} valueExpr="ProductID" displayExpr="ProductName" onValueChanged={valueChanged} /> ); }; export default ProductSelectBox;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.tsx'; ReactDOM.render( <App />, document.getElementById('app'), );

import React from 'react'; import { Form, Item } from 'devextreme-react/form'; const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone']; const renderFormItem = (item) => <span>{item.editorOptions.value}</span>; const AddressTab = (props) => ( <Form formData={props.data} colCount={2} className="address-form form-container" > {items.map((item, index) => ( <Item dataField={item} key={index} render={renderFormItem} /> ))} </Form> ); export default AddressTab;

import React, { useCallback } from 'react'; import { TabPanel, Item } from 'devextreme-react/tab-panel'; import AddressTab from './AddressTab.js'; import OrdersTab from './OrdersTab.js'; const MasterDetailView = (props) => { const renderOrdersTab = useCallback( () => <OrdersTab supplierId={props.data.key} />, [props.data.key], ); const renderAddressTab = useCallback( () => <AddressTab data={props.data.data} />, [props.data.data], ); return ( <TabPanel> <Item title="Orders" render={renderOrdersTab} /> <Item title="Address" render={renderAddressTab} /> </TabPanel> ); }; export default MasterDetailView;

import React, { useEffect, useState } from 'react'; import { Column, DataGrid, Paging, Summary, TotalItem, ValueFormat, } from 'devextreme-react/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; const OrderHistory = ({ productId }) => { const [orderHistoryStore, setOrderHistoryStore] = useState(null); useEffect(() => { if (productId) { const newOrderHistoryStore = createStore({ key: 'OrderID', loadParams: { ProductID: productId }, loadUrl: `${url}/GetOrdersByProduct`, }); setOrderHistoryStore(newOrderHistoryStore); } }, [productId]); return ( <DataGrid dataSource={orderHistoryStore} showBorders={true} > <Paging defaultPageSize={5} /> <Column dataField="OrderID" /> <Column dataField="OrderDate" dataType="date" /> <Column dataField="ShipCountry" /> <Column dataField="ShipCity" /> <Column dataField="UnitPrice" format="currency" /> <Column dataField="Quantity" /> <Column dataField="Discount" format="percent" /> <Summary> <TotalItem column="UnitPrice" summaryType="sum" > <ValueFormat precision={2} /> </TotalItem> <TotalItem column="Quantity" summaryType="count" /> </Summary> </DataGrid> ); }; export default OrderHistory;

import React, { useCallback, useState } from 'react'; import { Form, Item, Label } from 'devextreme-react/form'; import ProductSelectBox from './ProductSelectBox.js'; import OrderHistory from './OrderHistory.js'; const OrdersTab = (props) => { const [chosenProductId, setChosenProductId] = useState(null); const renderSelectBox = useCallback( () => ( <ProductSelectBox supplierId={props.supplierId} productId={chosenProductId} onProductChanged={setChosenProductId} /> ), [chosenProductId, props.supplierId], ); const renderOrderHistory = useCallback( () => <OrderHistory productId={chosenProductId} />, [chosenProductId], ); return ( <Form labelLocation="top" className="form-container" > <Item render={renderSelectBox}> <Label text="Product" /> </Item> <Item render={renderOrderHistory}> <Label text="Order History" /> </Item> </Form> ); }; export default OrdersTab;

import React, { useCallback, useEffect, useState } from 'react'; import { SelectBox } from 'devextreme-react/select-box'; import { createStore } from 'devextreme-aspnet-data-nojquery'; const url = 'https://js.devexpress.com/Demos/NetCore/api/DataGridAdvancedMasterDetailView'; const productLabel = { 'aria-label': 'Product' }; const ProductSelectBox = (props) => { const [productsData, setProductsData] = useState(null); const valueChanged = useCallback( (e) => { props.onProductChanged(e.value); }, [props], ); useEffect(() => { const setDefaultValue = (items) => { const firstItem = items[0]; if (firstItem && props.productId === null) { props.onProductChanged(firstItem.ProductID); } }; const newProductsData = createStore({ key: 'ProductID', loadParams: { SupplierID: props.supplierId }, loadUrl: `${url}/GetProductsBySupplier`, onLoaded: setDefaultValue, }); setProductsData(newProductsData); }, [props]); return ( <SelectBox value={props.productId} deferRendering={false} inputAttr={productLabel} dataSource={productsData} valueExpr="ProductID" displayExpr="ProductName" onValueChanged={valueChanged} /> ); }; export default ProductSelectBox;

import React from 'react'; import ReactDOM from 'react-dom'; import App from './App.js'; ReactDOM.render(<App />, document.getElementById('app'));

<!DOCTYPE html> <html lang="en"> <head> <title>DevExtreme Demo</title> <meta http-equiv="X-UA-Compatible" content="IE=edge" /> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=5.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/25.1.6/css/dx.light.css" /> <link rel="stylesheet" type="text/css" href="styles.css" /> <script src="https://cdn.jsdelivr.net/npm/core-js@2.6.12/client/shim.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/systemjs@0.21.3/dist/system.js"></script> <script type="text/javascript" src="config.js"></script> <script type="text/javascript"> System.import("./index.tsx"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"></div> </div> </body> </html>

#gridContainer { height: 620px; } .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) > .dx-datagrid-group-space, .dx-datagrid-rowsview .dx-master-detail-row:not(.dx-datagrid-edit-form) .dx-master-detail-cell { background-color: transparent; } .form-container { padding: 20px; } .address-form label { font-weight: bold; }