Column template in Vue Treegrid component

11 Jun 202413 minutes to read

The column template has options to display custom element instead of a field value in the column.

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='0' :height='260' :rowHeight='83' childMapping='Children'>
            <e-columns>
                <e-column field='EmpID' headerText='Employee ID' width=95></e-column>
                <e-column field='Name' headerText='Name' width=110></e-column>
                <e-column field='DOB' headerText=' Start Date' textAlign='Right' format='yMd' width=90></e-column>
                <e-column field='Year GR' textAlign='Center' :template='template1'  width=120></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script setup>

import { TreeGridComponent as EjsTreegrid, ColumnsDirective as EColumns, ColumnDirective as EColumn } from "@syncfusion/ej2-vue-treegrid";
import { SparklineComponent } from "@syncfusion/ej2-vue-charts";
import { getSparkData, textData } from "./datasource.js";
import { createApp } from 'vue';

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    components: {
        "ejs-sparkline": SparklineComponent
    },
    template: `<ejs-sparkline :id='elemid' height='50px' width='150px' type='WinLoss' valueType='Numeric' fill='#3C78EF' negativePointColor='#f7a816' tiePointColor='darkgray'  :dataSource='sparkData(data.EmployeeID)'></ejs-sparkline> `,
    data: function() {
        return {
            data: {},
        }
    },
    methods:{
        sparkData: function(id){
            return getSparkData('column', id);
        }
    },
    computed: {
        elemid: function() {
            return 'spkwl' + this.data.EmployeeID;
         },
    }
});

const data = textData;

const template1 = function () {
    return { template : columnTemplate }
}

</script>
<template>
<div id="app">
        <ejs-treegrid :dataSource="data" :treeColumnIndex='0' :height='260' :rowHeight='83' childMapping='Children'>
            <e-columns>
                <e-column field='EmpID' headerText='Employee ID' width=95></e-column>
                <e-column field='Name' headerText='Name' width=110></e-column>
                <e-column field='DOB' headerText=' Start Date' textAlign='Right' format='yMd' width=90></e-column>
                <e-column field='Year GR' textAlign='Center' :template='template1'  width=120></e-column>
            </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { SparklineComponent } from "@syncfusion/ej2-vue-charts";
import { getSparkData, textData } from "./datasource.js";
import { createApp } from 'vue';

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    components: {
        "ejs-sparkline": SparklineComponent
    },
    template: `<ejs-sparkline :id='elemid' height='50px' width='150px' type='WinLoss' valueType='Numeric' fill='#3C78EF' negativePointColor='#f7a816' tiePointColor='darkgray'  :dataSource='sparkData(data.EmployeeID)'></ejs-sparkline> `,
    data: function() {
        return {
            data: {},
        }
    },
    methods:{
        sparkData: function(id){
            return getSparkData('column', id);
        }
    },
    computed: {
        elemid: function() {
            return 'spkwl' + this.data.EmployeeID;
         },
    }
});

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

},

 data() {
    return {
      data: textData,
       template1: function () {
          return { template : columnTemplate }
        }
    };
  }
}
</script>

TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column field. If the field is not specified in the template column, the treegrid actions cannot be performed.

Using condition template

You can render the template elements based on condition.

In the following code, checkbox is rendered based on Approved field value.

  <script id="template" type="text/x-template">
            `<div v-if=cData class="template_checkbox">
                    <input type="checkbox" checked />
                </div>
                <div v-else class="template_checkbox">
                    <input type="checkbox" />
                </div>`
        </script>

<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='1' height='315px' >
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='approved' headerText='Approved' width=120 textAlign='Centre' :template='approvedtemplate'></e-column>
                <e-column field='progress' headerText='Progress' width=80 textAlign='Right'></e-column>
                </e-columns>
        </ejs-treegrid>
</div>
</template>
<script setup>

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

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    template: `<div v-if=cData class="template_checkbox">
                    <input type="checkbox" checked />
                </div>
                <div v-else class="template_checkbox">
                    <input type="checkbox" />
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        cData: function() {
            return this.data.approved;
        }
    }
});

const data = sampleData;

const approvedtemplate = function () {
    return { template : columnTemplate }
}

</script>
<template>
<div id="app">
        <ejs-treegrid :dataSource="data" childMapping='subtasks' :treeColumnIndex='1' height='315px' >
            <e-columns>
                <e-column field='taskID' headerText='Task ID' width=90 textAlign='Right'></e-column>
                <e-column field='taskName' headerText='Task Name' width=180></e-column>
                <e-column field='approved' headerText='Approved' width=120 textAlign='Centre' :template='approvedtemplate'></e-column>
                <e-column field='progress' headerText='Progress' width=80 textAlign='Right'></e-column>
                </e-columns>
        </ejs-treegrid>
</div>
</template>
<script>

import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
import {createApp} from 'vue';

const app = createApp({});

const columnTemplate = app.component('columnTemplate', {
    template: `<div v-if=cData class="template_checkbox">
                    <input type="checkbox" checked />
                </div>
                <div v-else class="template_checkbox">
                    <input type="checkbox" />
                </div>`,
    data: function() {
        return {
            data: {}
        }
    },
    computed: {
        cData: function() {
            return this.data.approved;
        }
    }
});


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

},

 data() {
    return {
      data: sampleData,
      approvedtemplate: function () {
          return { template : columnTemplate }
    }
  }
}
}
</script>