Row template in Vue Treegrid component
11 Jun 202424 minutes to read
The rowTemplate has an option to customise the look and behavior of the treegrid rows. The rowTemplate property accepts either the template string or HTML element ID.
<template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='Children' height=275 :rowHeight = '83' width='auto' :treeColumnIndex='0' :rowTemplate='rowTemplate'>
<e-columns>
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
<e-column field='Name' headerText='Employee Name' width = '150'></e-column>
<e-column field='Address' headerText = 'Employee Details' width='350'></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 { textdata } from "./datasource.js";
import {createApp } from "vue";
const app = createApp({});
const rTemplate = app.componentVue.component('rowTemplate',{
template: `<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border" style='padding: 10px 0px 0px 20px;'>
<div style="font-size:14px;">
<p style="font-size:9px;"></p>
</div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img :src="image" :alt="data.FullName" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
</tr>`,
data: function() {
return {
data: {}
}
},
computed: {
image: function() {
return '../../../../treegrid/images/' + this.data.FullName + '.png';
}
}
});
const data = textdata;
const rowTemplate = function() {
return { template : rTemplate}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0px 0px 0px;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
</style><template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='Children' height=275 :rowHeight = '83' width='auto' :treeColumnIndex='0' :rowTemplate='rowTemplate'>
<e-columns>
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
<e-column field='Name' headerText='Employee Name' width = '150'></e-column>
<e-column field='Address' headerText = 'Employee Details' width='350'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { textdata } from "./datasource.js";
import {createApp } from "vue";
const app = createApp({});
const rTemplate = app.componentVue.component('rowTemplate',{
template: `<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border" style='padding: 10px 0px 0px 20px;'>
<div style="font-size:14px;">
<p style="font-size:9px;"></p>
</div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img :src="image" :alt="data.FullName" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
</tr>`,
data: function() {
return {
data: {}
}
},
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,
rowTemplate: function () {
return { template : rTemplate}
}
};
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0px 0px 0px;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
</style>The rowTemplate property accepts only the TR element.
Row template with formatting
If the rowTemplate is used, the value cannot be formatted inside the template using the columns.format property. In that case, a function should be defined globally to format the value and invoke it inside the template.
<template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='Children' height=275 :rowHeight = '83' width='auto' :treeColumnIndex='0' :rowTemplate='rowTemplate'>
<e-columns>
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
<e-column field='Address' headerText = 'Employee Details' width='350'></e-column>
<e-column field='DOB' headerText = 'DOB' width = '150'></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 { textdata } from "./datasource.js";
import { Internationalization } from '@syncfusion/ej2-base';
import {createApp } from "vue";
let instance = new Internationalization();
const app = createApp({});
const rTemplate = app.component('rowTemplate',{
template: `<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img :src="image" :alt="data.FullName" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
<td class="border" style='padding-left: 20px;'>
<div></div>
</td>
</tr>`,
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 rowTemplate = function() {
return { template : rTemplate}
};
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0px 0px 0px;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
</style><template>
<div id="app">
<ejs-treegrid :dataSource="data" childMapping='Children' height=275 :rowHeight = '83' width='auto' :treeColumnIndex='0' :rowTemplate='rowTemplate'>
<e-columns>
<e-column field='EmpID' headerText='Employee ID' width='180'></e-column>
<e-column field='Address' headerText = 'Employee Details' width='350'></e-column>
<e-column field='DOB' headerText = 'DOB' width = '150'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, 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 rTemplate = app.component('rowTemplate',{
template: `<tr>
<td class="border" style='padding-left:18px;'>
<div></div>
</td>
<td class="border">
<div>
<div style="position:relative;display:inline-block;">
<img :src="image" :alt="data.FullName" />
</div>
<div style="display:inline-block;">
<div style="padding:5px;"></div>
<div style="padding:5px;"></div>
<div style="padding:5px;font-size:12px;"></div>
</div>
</div>
</td>
<td class="border" style='padding-left: 20px;'>
<div></div>
</td>
</tr>`,
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,
rowTemplate: function () {
return { template : rTemplate}
}
};
}
}
</script>
<style>
@import "../../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
.border {
border-color: #e0e0e0;
border: 1px solid #e0e0e0;
border-width: 1px 0px 0px 0px;
}
img {
width: 60px;
height: 60px;
vertical-align: baseline;
border-radius: 50px;
margin-left: 20px;
background-repeat: no-repeat;
}
</style>Limitations
Row template feature is not compatible with all the features which are available in treegrid and it has limited features support. Here we have listed out the features which are not compatible with row template feature.
- Filtering
- Paging
- Sorting
- Scrolling
- Searching
- Rtl
- Context Menu
- State Persistence