Hierarchy grid in Vue Grid component
28 Mar 202324 minutes to read
The Grid allows display of table data in a hierarchical structure to visualize relations between parent and child records.This feature is enabled by defining the childGrid
and childGrid.queryString
.
The childGrid
describes the options of grid and the childGrid.queryString
describes the relation between parent and child grids.
To use hierarchical binding, inject the DetailRow in the provide section.
<template>
<div id="app">
<ejs-grid :dataSource='parentData' height='315px' :childGrid='childGrid'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
- Grid supports n level of child grids.
- Hierarchical binding is not supported when
DetailTemplate
is enabled.
ExpandAll by external button
By default, grid renders in collapsed state. You can expand all child grid rows by invoking the expandAll
method, and collapse all grid rows by invoking the collapseAll
through an external button.
<template>
<div id="app">
<ejs-button @click.native='expand'>Expand All</ejs-button>
<ejs-button @click.native='collapse'>Collapse All</ejs-button>
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { ButtonPlugin } from "@syncfusion/ej2-vue-buttons";
import { data, employeeData } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(ButtonPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
expand: function() {
this.$refs.grid.ej2Instances.detailRowModule.expandAll();
},
collapse: function() {
this.$refs.grid.ej2Instances.detailRowModule.collapseAll();
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Expand child grid initially
You can expand a particular child grid at initial rendering by invoking the expand
method in the dataBound
event.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid' :dataBound='onDataBound'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
onDataBound: function() {
this.$refs.grid.ej2Instances.detailRowModule.expand(2); // initially 2nd chid Grid will expand.
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Dynamically load child grid data
You can dynamically load child grid dataSource by using the detailDataBound
event.This detailDataBound
event triggers when the child grid is expanded for the first time.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid' :detailDataBound='onDetailDataBound'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
queryString: 'EmployeeID',
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
onDetailDataBound(args) {
args.detailElement.querySelector('.e-grid').ej2_instances[0].dataSource = data; // assign data source for child grid.
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Bind hierarchy grid with different field
By default, Parent and child grid relation will be maintained by queryString
property. We should use the same field name to map both parent and child grid. To achieve parent and child relation with different fields, we need to change the mapping value in the child grid load
event.
In the below sample, we have bound the child and parent grid with different fields. Parent grid field name as EmployeeID and the child grid field name as ID. We need to define the mapping value of parentKeyFieldValue from the parent row data in the child grid load
event.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { data, employeeData, childdata } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: childdata,
queryString: 'ID',
columns: [
{ field: 'ID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
load: function (){
this.parentDetails.parentKeyFieldValue = this.parentDetails.parentRowData['EmployeeID'];
}
}
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Adding Record in ChildGrid
Parent and child grid are related by queryString
field value. To maintain this relation in newly added record, You need to set value for queryString
field in the added data by the actionBegin
event.
In the below demo, EmployeeID field relates the parent and child grids. To add a new record in child grid, We have to set the EmployeeID field with parent record’s queryString
field value in the actionBegin
event.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow, Edit, Toolbar } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
dataSource: data,
queryString: 'EmployeeID',
toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel'],
editSettings: { allowEditing: true, allowAdding: true, allowDeleting: true },
columns: [
{ field: 'OrderID', headerText: 'Order ID', isPrimaryKey:true, textAlign: 'Right', width: 120 },
{ field: 'EmployeeID', headerText: 'Employee ID', textAlign: 'Right', allowEditing:false, width: 120 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
],
actionBegin: function(args) {
if (args.requestType === "add") {
// `parentKeyFieldValue` refers to the queryString field value of the parent record.
args.data.EmployeeID = this.parentDetails.parentKeyFieldValue;
}
}
}
}
},
provide: {
grid: [DetailRow, Edit, Toolbar]
}
}
</script>
<style>
@import "https://ej2.syncfusion.com/vue/documentation/node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>
Dynamically bind data to child grid based on parent row Data
By default, the childGrid.queryString describes the relationship between parent and child grids and visualizes the data in a hierarchical structure. Instead of the queryString
property, we can dynamically bind the datasource to the childGrid
based on the parent row data using the detailDataBound event of the grid.
While expanding the child Grid, the detailDataBound
event will be triggered. In this event, based on the EmployeeID column value of parent row data, filter the equally matched data from the childGrid
datasource using the DataManager
plugin and bind the filtered data as a datasource to the childGrid
. This can be demonstrated by the following sample.
<template>
<div id="app">
<ejs-grid ref='grid' :dataSource='parentData' height='265px' :childGrid='childGrid' :detailDataBound='onDetailDataBound'>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width=120></e-column>
<e-column field='FirstName' headerText='FirstName' width=150></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, DetailRow } from "@syncfusion/ej2-vue-grids";
import { data, employeeData } from './datasource.js';
import {DataManager,Query} from '@syncfusion/ej2-data';
Vue.use(GridPlugin);
export default {
data() {
return {
parentData: employeeData,
childGrid: {
columns: [
{ field: 'OrderID', headerText: 'Order ID', textAlign: 'Right', width: 120 },
{ field: 'CustomerID', headerText: 'Customer ID', width: 150 },
{ field: 'ShipCity', headerText: 'Ship City', width: 150 },
{ field: 'ShipName', headerText: 'Ship Name', width: 150 }
]
}
}
},
methods: {
onDetailDataBound(args) {
var orderData = data;
var empIdValue = args.childGrid.parentDetails.parentRowData.EmployeeID;
var matchedData = new DataManager(data).executeLocal(
new Query().where("EmployeeID", "equal", empIdValue, true)
);
args.childGrid.query = new Query();
args.childGrid.dataSource = matchedData;
}
},
provide: {
grid: [DetailRow]
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>