Feel free to share demo-related thoughts here.
If you have technical questions, please create a support ticket in the DevExpress Support Center.
Thank you for the feedback!
If you have technical questions, please create a support ticket in the DevExpress Support Center.
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/Mvc/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/Mvc/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 { 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/Mvc/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, SelectBoxTypes } from 'devextreme-react/select-box';
import { createStore } from 'devextreme-aspnet-data-nojquery';
const url = 'https://js.devexpress.com/Demos/Mvc/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'),
);
window.exports = window.exports || {};
window.config = {
transpiler: 'ts',
typescriptOptions: {
module: 'system',
emitDecoratorMetadata: true,
experimentalDecorators: true,
jsx: 'react',
},
meta: {
'react': {
'esModule': true,
},
'typescript': {
'exports': 'ts',
},
'devextreme/time_zone_utils.js': {
'esModule': true,
},
'devextreme/localization.js': {
'esModule': true,
},
'devextreme/viz/palette.js': {
'esModule': true,
},
'devextreme-aspnet-data-nojquery': {
'esModule': true,
},
},
paths: {
'npm:': 'https://unpkg.com/',
},
defaultExtension: 'js',
map: {
'ts': 'npm:plugin-typescript@4.2.4/lib/plugin.js',
'typescript': 'npm:typescript@4.2.4/lib/typescript.js',
'react': 'npm:react@17.0.2/umd/react.development.js',
'react-dom': 'npm:react-dom@17.0.2/umd/react-dom.development.js',
'prop-types': 'npm:prop-types@15.8.1/prop-types.js',
'devextreme-aspnet-data-nojquery': 'npm:devextreme-aspnet-data-nojquery@3.0.0/index.js',
'rrule': 'npm:rrule@2.6.4/dist/es5/rrule.js',
'luxon': 'npm:luxon@1.28.1/build/global/luxon.min.js',
'es6-object-assign': 'npm:es6-object-assign@1.1.0',
'devextreme': 'npm:devextreme@24.1.7/cjs',
'devextreme-react': 'npm:devextreme-react@24.1.7/cjs',
'jszip': 'npm:jszip@3.10.1/dist/jszip.min.js',
'devextreme-quill': 'npm:devextreme-quill@1.7.1/dist/dx-quill.min.js',
'devexpress-diagram': 'npm:devexpress-diagram@2.2.12/dist/dx-diagram.js',
'devexpress-gantt': 'npm:devexpress-gantt@4.1.56/dist/dx-gantt.js',
'@devextreme/runtime': 'npm:@devextreme/runtime@3.0.13',
'inferno': 'npm:inferno@7.4.11/dist/inferno.min.js',
'inferno-compat': 'npm:inferno-compat/dist/inferno-compat.min.js',
'inferno-create-element': 'npm:inferno-create-element@7.4.11/dist/inferno-create-element.min.js',
'inferno-dom': 'npm:inferno-dom/dist/inferno-dom.min.js',
'inferno-hydrate': 'npm:inferno-hydrate@7.4.11/dist/inferno-hydrate.min.js',
'inferno-clone-vnode': 'npm:inferno-clone-vnode/dist/inferno-clone-vnode.min.js',
'inferno-create-class': 'npm:inferno-create-class/dist/inferno-create-class.min.js',
'inferno-extras': 'npm:inferno-extras/dist/inferno-extras.min.js',
'devextreme-cldr-data': 'npm:devextreme-cldr-data@1.0.3',
// SystemJS plugins
'plugin-babel': 'npm:systemjs-plugin-babel@0.0.25/plugin-babel.js',
'systemjs-babel-build': 'npm:systemjs-plugin-babel@0.0.25/systemjs-babel-browser.js',
// Prettier
'prettier/standalone': 'npm:prettier@2.8.8/standalone.js',
'prettier/parser-html': 'npm:prettier@2.8.8/parser-html.js',
},
packages: {
'devextreme': {
defaultExtension: 'js',
},
'devextreme-react': {
main: 'index.js',
},
'devextreme/events/utils': {
main: 'index',
},
'devextreme/localization/messages': {
format: 'json',
defaultExtension: 'json',
},
'devextreme/events': {
main: 'index',
},
'es6-object-assign': {
main: './index.js',
defaultExtension: 'js',
},
},
packageConfigPaths: [
'npm:@devextreme/*/package.json',
'npm:@devextreme/runtime@3.0.13/inferno/package.json',
],
babelOptions: {
sourceMaps: false,
stage0: true,
react: true,
},
};
System.config(window.config);
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/Mvc/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/Mvc/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/24.1.7/css/dx.light.css" />
<link rel="stylesheet" type="text/css" href="styles.css" />
<script src="https://unpkg.com/core-js@2.6.12/client/shim.min.js"></script>
<script src="https://unpkg.com/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;
}