Master-Detail View

The Master-Detail View allows users to expand a row ('master') and display the related content ('details') in the expanded section. To configure this feature, set the the masterDetail object's enabled property to true and use a template to specify detail section content. In this demo, the detail section displays another DataGrid.

See more Hide details

Prev Demo Next Demo

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.

Send Feedback

Thank you!
We appreciate your feedback.

jQuery

Angular

Vue

React

AngularJS

ASP.NET Core

ASP.NET MVC

Copy to CodeSandBox

Apply

Reset

<template> <DxDataGrid id="grid-container" :show-borders="true" :data-source="dataSource" key-expr="ID" > <DxColumn :width="70" data-field="Prefix" caption="Title" /> <DxColumn data-field="FirstName"/> <DxColumn data-field="LastName"/> <DxColumn :width="170" data-field="Position" /> <DxColumn :width="125" data-field="State" /> <DxColumn data-field="BirthDate" data-type="date" /> <DxMasterDetail :enabled="true" template="masterDetailTemplate" /> <template #masterDetailTemplate="{ data: employee }"> <DetailTemplate :template-data="employee" /> </template> </DxDataGrid> </template> <script> import { DxDataGrid, DxColumn, DxMasterDetail, } from 'devextreme-vue/data-grid'; import DetailTemplate from './DetailTemplate.vue'; import service from './data.js'; const employees = service.getEmployees(); export default { components: { DxDataGrid, DxColumn, DxMasterDetail, DetailTemplate }, data() { return { dataSource: employees }; } }; </script> <style> #grid-container { height: 440px; } </style>

<template> <div> <div class="master-detail-caption">{{ detailInfo }}</div> <DxDataGrid :data-source="dataSource" :show-borders="true" :column-auto-width="true" > <DxColumn data-field="Subject"/> <DxColumn data-field="StartDate" data-type="date" /> <DxColumn data-field="DueDate" data-type="date" /> <DxColumn data-field="Priority"/> <DxColumn :calculate-cell-value="completedValue" data-type="boolean" caption="Completed" /> </DxDataGrid> </div> </template> <script> import { DxDataGrid, DxColumn } from 'devextreme-vue/data-grid'; import ArrayStore from 'devextreme/data/array_store'; import DataSource from 'devextreme/data/data_source'; import service from './data.js'; const tasks = service.getTasks(); export default { components: { DxDataGrid, DxColumn }, props: { templateData: { type: Object, default: ()=>{} } }, data() { let { FirstName, LastName } = this.templateData.data; return { dataSource: this.getTasks(this.templateData.key), detailInfo: `${FirstName } ${ LastName }'s Tasks` }; }, methods: { completedValue(rowData) { return rowData.Status === 'Completed'; }, getTasks(key) { return new DataSource({ store: new ArrayStore({ data: tasks, key: 'ID' }), filter: ['EmployeeID', '=', key] }); } } }; </script> <style> .master-detail-caption { padding: 0 0 5px 10px; font-size: 14px; font-weight: bold; }</style>

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

<!DOCTYPE html> <html> <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=1.0" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.common.css" /> <link rel="stylesheet" type="text/css" href="https://cdn3.devexpress.com/jslib/20.2.6/css/dx.light.css" /> <script src="https://unpkg.com/core-js@2.4.1/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.js'); </script> </head> <body class="dx-viewport"> <div class="demo-container"> <div id="app"> </div> </div> </body> </html>

System.config({ transpiler: 'plugin-babel', meta: { '*.vue': { loader: 'vue-loader' }, 'devextreme/localization.js': { "esModule": true }, }, paths: { 'npm:': 'https://unpkg.com/' }, map: { 'vue': 'npm:vue@3.0.0/dist/vue.esm-browser.js', 'vue-loader': 'npm:dx-systemjs-vue-browser@1.0.15/index.js', 'mitt': 'npm:mitt/dist/mitt.umd.js', 'rrule': 'npm:rrule@2.6.6/dist/es5/rrule.js', 'luxon': 'npm:luxon@1.26.0/build/global/luxon.min.js', 'es6-object-assign': 'npm:es6-object-assign@1.1.0', 'devextreme': 'npm:devextreme@20.2.6', 'devextreme-vue': 'npm:devextreme-vue@20.2.6', 'jszip': 'npm:jszip@3.6.0/dist/jszip.min.js', 'devextreme-quill': 'npm:devextreme-quill@0.10.3/dist/dx-quill.min.js', 'devexpress-diagram': 'npm:devexpress-diagram@2.0.18/dist/dx-diagram.js', 'devexpress-gantt': 'npm:devexpress-gantt@2.0.24/dist/dx-gantt.js', 'preact': 'npm:preact@10.5.13/dist/preact.js', 'preact/hooks': 'npm:preact@10.5.13/hooks/dist/hooks.js', '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' }, packages: { 'devextreme-vue': { main: 'index.js' }, 'devextreme': { defaultExtension: 'js' }, 'devextreme/events/utils': { main: 'index' }, 'devextreme/events': { main: 'index' }, 'es6-object-assign': { main: './index.js', defaultExtension: 'js' } }, babelOptions: { sourceMaps: false, stage0: true } });