Column template in Vue Treegrid component
24 Mar 20238 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>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { SparklinePlugin } from "@syncfusion/ej2-vue-charts";
import { sparkdata, getSparkData, textData } from "./datasource.js";
import { RowDataBoundEventArgs, getObject } from '@syncfusion/ej2-grids';
import { EmitType } from '@syncfusion/ej2-base';
import { Sparkline, ISparklineLoadEventArgs, SparklineTheme } from '@syncfusion/ej2-charts';
Vue.use(TreeGridPlugin);
Vue.use(SparklinePlugin);
let winloss: Sparkline;
export default {
data() {
return {
data: textData,
template1: function () {
return { template : Vue.component('columnTemplate',{
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: number){
return getSparkData('column', id);
}
},
computed: {
elemid: function() {
return 'spkwl' + this.data.EmployeeID;
},
})}
};
};
}
}
</script>
TreeGrid actions such as editing, filtering and sorting etc. will depend upon the column
field
. If thefield
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>
import Vue from "vue";
import { TreeGridPlugin } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
Vue.use(TreeGridPlugin);
export default {
data() {
return {
data: sampleData,
approvedtemplate: function () {
return { template : Vue.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;
}
}
})}
};
}
}
}
</script>