Search results

Detail Template in Vue TreeGrid component

31 Jan 2023 / 2 minutes to read

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.

Source
Preview
app.vue
datasource.js
Copied to clipboard
<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>
Copied to clipboard
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')
                },
                ]
            }]
        }]
    }];
});