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';
import type { TextBoxTypes } from 'devextreme-react/text-box';
const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone'];
interface FormItemRenderData {
editorOptions: TextBoxTypes.Properties;
}
const renderFormItem = (item: FormItemRenderData) => (
<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 type { DataGridTypes } from 'devextreme-react/data-grid';
import { TabPanel, Item } from 'devextreme-react/tab-panel';
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 type { CustomStore } from 'devextreme-react/common/data';
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<CustomStore | undefined>(undefined);
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 type { CustomStore } from 'devextreme-react/common/data';
import { SelectBox } from 'devextreme-react/select-box';
import 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<CustomStore | null>(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(undefined);
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/26.1.5/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="./bundle.css" />
</head>
<body class="dx-viewport">
<div class="demo-container">
<div id="app"></div>
</div>
<script src="bundles/vendor/react.vendor.js"></script>
<script src="./bundle.js"></script>
</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;
}