Vue 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.

Was this demo helpful?

Thank you!

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!

Backend API

<template> <DxDataGrid id="gridContainer" :data-source="suppliersData" :remote-operations="true" :show-borders="true" > <DxPaging :page-size="15"/> <DxPager :visible="true"/> <DxColumn data-field="ContactName"/> <DxColumn data-field="ContactTitle"/> <DxColumn data-field="CompanyName"/> <DxColumn data-field="City"/> <DxColumn data-field="Country"/> <DxMasterDetail :enabled="true" template="master-detail" /> <template #master-detail="{ data }"> <MasterDetail :master-detail-data="data"/> </template> </DxDataGrid> </template> <script setup lang="ts"> import { DxDataGrid, DxColumn, DxPaging, DxPager, DxMasterDetail, } from 'devextreme-vue/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import MasterDetail from './MasterDetail.vue'; const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView'; const suppliersData = createStore({ key: 'SupplierID', loadUrl: `${url}/GetSuppliers`, }); </script>

<template> <DxForm :form-data="data" :items="items" :col-count="2" :customize-item="customizeItem" class="address-form form-container" > <template #form-item="{ data: item }"> <span> {{ item.editorOptions.value }} </span> </template> </DxForm> </template> <script setup lang="ts"> import { DxForm, DxFormTypes } from 'devextreme-vue/form'; import { Supplier } from './data.ts'; defineProps<{ data: Supplier }>(); const items = ['Address', 'City', 'Region', 'PostalCode', 'Country', 'Phone']; const customizeItem = (item: DxFormTypes.SimpleItem) => { item.template = 'form-item'; }; </script>

<template> <DxTabPanel> <DxItem title="Orders" template="orders-tab" /> <template #orders-tab> <OrdersTab :supplier-id="masterDetailData.key" /> </template> <DxItem title="Address" template="address-tab" /> <template #address-tab> <AddressTab :data="masterDetailData.data" /> </template> </DxTabPanel> </template> <script setup lang="ts"> import { DxTabPanel, DxItem } from 'devextreme-vue/tab-panel'; import OrdersTab from './OrdersTab.vue'; import AddressTab from './AddressTab.vue'; import { Supplier } from './data.ts'; defineProps<{ masterDetailData: { key: number, data: Supplier } }>(); </script>

<template> <div> <DxDataGrid :data-source="orderHistoryStore" :show-borders="true" > <DxPaging :page-size="5"/> <DxColumn data-field="OrderID"/> <DxColumn data-field="OrderDate" data-type="date" /> <DxColumn data-field="ShipCountry"/> <DxColumn data-field="ShipCity"/> <DxColumn data-field="UnitPrice" format="currency" /> <DxColumn data-field="Quantity"/> <DxColumn data-field="Discount" format="percent" /> <DxSummary> <DxTotalItem column="UnitPrice" summary-type="sum" > <DxValueFormat :precision="2" format="currency" /> </DxTotalItem> <DxTotalItem column="Quantity" summary-type="count" /> </DxSummary> </DxDataGrid> </div> </template> <script setup lang="ts"> import { DxDataGrid, DxColumn, DxPaging, DxSummary, DxTotalItem, DxValueFormat, } from 'devextreme-vue/data-grid'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { computed } from 'vue'; const props = defineProps<{ productId: number | null }>(); const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView'; const orderHistoryStore = computed(() => (props.productId === null ? null : { store: createStore({ key: 'OrderID', loadParams: { ProductID: props.productId }, loadUrl: `${url}/GetOrdersByProduct`, }), })); </script>

<template> <DxForm label-location="top" class="form-container" > <DxItem template="select-box"> <DxLabel text="Product"/> </DxItem> <template #select-box> <ProductSelectBox :supplier-id="supplierId" @product-changed="chosenProductId = $event" /> </template> <DxItem template="order-history"> <DxLabel text="Order History"/> </DxItem> <template #order-history> <OrderHistory :product-id="chosenProductId" /> </template> </DxForm> </template> <script setup lang="ts"> import { ref } from 'vue'; import { DxForm, DxItem, DxLabel } from 'devextreme-vue/form'; import ProductSelectBox from './ProductSelectBox.vue'; import OrderHistory from './OrderHistory.vue'; defineProps<{ supplierId: number }>(); const chosenProductId = ref<null | number>(null); </script>

<template> <DxSelectBox :defer-rendering="false" :data-source="dataSource" :input-attr="{ 'aria-label': 'Product' }" :value="productId" value-expr="ProductID" display-expr="ProductName" @valueChanged="$emit('product-changed', $event.value)" /> </template> <script setup lang="ts"> import { ref } from 'vue'; import DxSelectBox from 'devextreme-vue/select-box'; import { createStore } from 'devextreme-aspnet-data-nojquery'; import { Product } from './data.ts'; defineEmits(['product-changed']); const props = defineProps<{ supplierId: number }>(); const url = 'https://js.devexpress.com/Demos/Mvc/api/DataGridAdvancedMasterDetailView'; const dataSource = createStore({ key: 'ProductID', loadParams: { SupplierID: props.supplierId }, loadUrl: `${url}/GetProductsBySupplier`, onLoaded: setDefaultValue, }); const productId = ref(null); function setDefaultValue(items: Product[]) { const firstItem = items[0]; if (firstItem && productId.value === null) { productId.value = firstItem.ProductID; } } </script>

export type Supplier = { SupplierID: number; CompanyName: string; ContactName: string; ContactTitle: string; Address: string; City: string; Region: string | null; PostalCode: string; Country: string; Phone: string; Fax: string | null; HomePage: string | null; }; export type Product = { ProductID: number; ProductName: string SupplierID: number; CategoryID: number; QuantityPerUnit: string UnitPrice: number UnitsInStock: number UnitsOnOrder: number ReorderLevel: number Discontinued: boolean; }; export type Order = { OrderID: number; OrderDate: Date; ShipCountry: string; ShipCity: string; UnitPrice: number; Quantity: number; Discount: number; };

import { createApp } from 'vue'; import App from './App.vue'; createApp(App).mount('#app');

#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; }

<!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 type="module"> import * as vueCompilerSFC from "https://unpkg.com/@vue/compiler-sfc@3.4.16/dist/compiler-sfc.esm-browser.js"; window.vueCompilerSFC = vueCompilerSFC; </script> <script src="https://unpkg.com/typescript@4.9.5/lib/typescript.js"></script> <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.ts"); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app" /> </div> </body> </html>