The detail template provides additional information about a particular row. By expanding the parent row the child rows are expanded along with their detail template. The detailTemplate property accepts either the template string or HTML element ID.
<template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='Children' height=317 width='auto' :treeColumnIndex='0' :detailTemplate='detailTemplate'>
<e-columns>
<e-column field='Name' headerText='First Name' width='180'></e-column>
<e-column field='DOB' headerText = 'DOB' width='105' type='date' format='yMd'></e-column>
<e-column field='Designation' headerText = 'Designation' width='180'></e-column>
<e-column field='Country' headerText = 'Country' width='148'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import Vue from "vue";
import { TreeGridPlugin, DetailRow } from "@syncfusion/ej2-vue-treegrid";
import { textdata } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';
let instance = new Internationalization();
Vue.use(TreeGridPlugin);
export default {
data: () => {
return {
data: textdata,
detailTemplate: function () {
return { template : Vue.component('detailTemplate',{
template: `<div>
<div style="position: relative; display: inline-block; float: left; font-weight: bold; width: 10%;padding:5px 4px 2px 27px;;">
<img :src="image" alt="{{data.FullName}}"/>
</div>
<div style="padding-left: 10px; display: inline-block; width: 66%; text-wrap: normal;font-size:13px;font-family:'Segoe UI';">
<div class="e-description" style="word-wrap: break-word;">
<b>{{data.Name}}</b> was born on {{format(data.DOB)}}. Now lives at {{data.Address}}, {{data.Country}}. {{data.Name}} holds a position of <b>{{data.Designation}}</b> in our WA department, (Seattle USA).
</div>
<div class="e-description" style="word-wrap: break-word;margin-top:5px;">
<b style="margin-right:10px;">Contact:</b>{{data.Contact}}
</div>
</div>
</div>`,
data: function() {
return {
data: {}
}
},
methods: {
format: function(value) {
return instance.formatDate(value, { skeleton: 'yMd', type: 'date' });
}
},
computed: {
image: function() {
return '../../../../../treegrid/images/' + this.data.FullName + '.png';
}
}
})}
}
};
},
provide: {
treegrid: [DetailRow]
}
}
</script>define(["require", "exports"], function (require, exports) {
"use strict";
Object.defineProperty(exports, "__esModule", { value: true });
exports.textdata= [{
'Name': 'Robert King',
'FullName': 'RobertKing',
'Designation': 'Chief Executive Officer',
'EmployeeID': '1',
'EmpID': 'EMP001',
'Address': '507 - 20th Ave. E.Apt. 2A, Seattle',
'Contact': '(206) 555-9857',
'Country': 'USA',
'DOB': new Date('2/15/1963'),
'Children': [{
'Name': 'David william',
'FullName': 'DavidWilliam',
'Designation': 'Vice President',
'EmployeeID': '2',
'EmpID': 'EMP004',
'Address': '722 Moss Bay Blvd., Kirkland',
'Country': 'USA',
'Contact': '(206) 555-3412',
'DOB': new Date('5/20/1971'),
'Children': [{
'Name': 'Nancy Davolio',
'FullName': 'NancyDavolio',
'Designation': 'Marketing Executive',
'EmployeeID': '3',
'EmpID': 'EMP035',
'Address': '4110 Old Redmond Rd., Redmond',
'Country': 'USA',
'Contact': '(206) 555-8122',
'DOB': new Date('3/19/1966'),
'Children': [
{
'Name': 'Andrew Fuller',
'FullName': 'AndrewFuller',
'Designation': 'Sales Representative',
'EmployeeID': '4',
'EmpID': 'EMP045',
'Address': '14 Garrett Hill, London',
'Country': 'UK',
'Contact': '(71) 555-4848',
'DOB': new Date('9/20/1980')
},
{
'Name': 'Anne Dodsworth',
'FullName': 'AnneDodsworth',
'Designation': 'Sales Representative',
'EmployeeID': '5',
'EmpID': 'EMP091',
'Address': '4726 - 11th Ave. N.E., Seattle',
'Country': 'USA',
'Contact': '(206) 555-1189',
'DOB': new Date('10/19/1989')
},
{
'Name': 'Michael Suyama',
'FullName': 'MichaelSuyama',
'Designation': 'Sales Representative',
'EmployeeID': '6',
'EmpID': 'EMP110',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/02/1987')
},
{
'Name': 'Janet Leverling',
'FullName': 'JanetLeverling',
'Designation': 'Sales Coordinator',
'EmployeeID': '7',
'EmpID': 'EMP131',
'Address': 'Edgeham Hollow Winchester Way, London',
'Country': 'UK',
'Contact': '(71) 555-3636',
'DOB': new Date('11/06/1990')
},
]
},
{
'Name': 'Romey Wilson',
'FullName': 'RomeyWilson',
'Designation': 'Sales Executive',
'EmployeeID': '8',
'EmpID': 'EMP039',
'Address': '7 Houndstooth Rd., London',
'Country': 'UK',
'Contact': '(71) 555-3690',
'DOB': new Date('02/02/1980'),
'Children': [
{
'Name': 'Margaret Peacock',
'FullName': 'MargaretPeacock',
'Designation': 'Sales Representative',
'EmployeeID': '9',
'EmpID': 'EMP213',
'Address': '4726 - 11th Ave. N.E., California',
'Country': 'USA',
'Contact': '(206) 555-1989',
'DOB': new Date('01/21/1986')
},
{
'Name': 'Laura Callahan',
'FullName': 'LauraCallahan',
'Designation': 'Sales Coordinator',
'EmployeeID': '10',
'EmpID': 'EMP201',
'Address': 'Coventry House Miner Rd., London',
'Country': 'UK',
'Contact': '(71) 555-2222',
'DOB': new Date( '12/01/1990')
},
{
'Name': 'Steven Buchanan',
'FullName': 'StevenBuchanan',
'Designation': 'Sales Representative',
'EmployeeID': '11',
'EmpID': 'EMP197',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7408',
'DOB': new Date('03/23/1987')
},
{
'Name': 'Tedd Lawson',
'FullName': 'TeddLawson',
'Designation': 'Sales Representative',
'EmployeeID': '12',
'EmpID': 'EMP167',
'Address': '200 Lincoln Ave, Salinas, CA 93901',
'Country': 'USA',
'Contact': '(831) 758-7368 ',
'DOB': new Date('08/09/1989')
},
]
}]
}]
}];
});