Detail template in Vue Treegrid component

11 Jun 20247 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.

Composition API (~/src/App.vue)

<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 setup>
import { provide } from "vue";

import { TreeGridComponent as EjsTreegrid, DetailRow, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-treegrid";
import { textdata } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';
import {createApp} from 'vue';

let instance = new Internationalization();

const app = createApp({});

const detTemplate = app.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=""/>
    </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></b> was born on . Now lives at , .  holds a position of <b></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>
        </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';
      }
    }
});

const data = textdata;

const detailTemplate = function() {
  return { template : detTemplate}
};

provide('treegrid',  [DetailRow]);

</script>

Options API (~/src/App.vue)

<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 { TreeGridComponent, DetailRow, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { textdata } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';
import {createApp} from 'vue';

let instance = new Internationalization();

const app = createApp({});

const detTemplate = app.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=""/>
    </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></b> was born on . Now lives at , .  holds a position of <b></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>
        </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';
      }
    }
});

export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,

},

  data: () => {
    return {
      data: textdata,
      detailTemplate: function () {
        return { template : detTemplate}
      }
    };
  },
  provide: {
  treegrid: [DetailRow]
  }
}
</script>