Column template in Vue Grid component
16 Mar 202315 minutes to read
Render image in a column
The column template has options to display custom element instead of a field value in the column.
The template property should be a function which returns an object. The object should contain a Vue component which should be assigned to the template property. The grid will look for the template property and render it as new Vue instance.
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Employee Image' width='150' textAlign='Center' :template='cTemplate'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' width='125' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column field='Title' headerText='Title' width='170'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: employeeData,
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<div class="image">
<img :src="image" :alt="altImage"/>
</div>`,
data: function() {
return {
data: {}
}
},
computed: {
image: function() {
return './' + this.data.EmployeeID + '.png';
},
altImage: function() {
return this.data.EmployeeID;
}
}
})}
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
.image img {
height: 55px;
width: 55px;
border-radius: 50px;
box-shadow: inset 0 0 1px #e0e0e0, inset 0 0 14px rgba(0,0,0,0.2);
}
</style>Render other components in a column
You can render any component in a grid column using the template property.
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' >
<e-columns>
<e-column headerText='Order Status' :template="dropdownTemplate" width=200></e-column>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=120></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column field='ShipName' headerText='Ship Name' width=120></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { DropDownListPlugin } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
Vue.use(GridPlugin);
Vue.use(DropDownListPlugin);
export default {
data() {
return {
data: data,
dropdownTemplate: function () {
return {
template: Vue.component('bindDropdown', {
template: `<ejs-dropdownlist id='dropdownlist' :dataSource='dropData'> </ejs-dropdownlist>`,
data() {
return {
dropData: ['Order Placed', 'Processing', 'Delivered']
}
}
})
}
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>Using condition template
You can render the template elements based on condition.
In the following code, checkbox is rendered based on Discontinued field value.
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Discontinued' width='150' textAlign='Center' :template='cTemplate'></e-column>
<e-column field='ProductID' headerText='Product ID' width='125'></e-column>
<e-column field='ProductName' headerText='Name' width='120'></e-column>
<e-column field='SupplierID' headerText='Supplier ID' width='170'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin } from "@syncfusion/ej2-vue-grids";
import { productData } from "./datasource.js";
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: productData,
cTemplate: 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.Discontinued;
}
}
})}
}
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>How to get the row object by clicking on the template element
You can get the row object without selecting the row and achieve it using the column template feature and the getRowObjectFromUID method of the Grid.
In the following sample, the button element is rendered in the Employee Data column. By clicking the button, you can get the row object using the getRowObjectFromUID method of the Grid and display it in the console.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315 :recordClick = 'recordClick'>
<e-columns>
<e-column headerText='Employee Data' width='150' textAlign='Right' :template='cTemplate' isPrimaryKey='true'></e-column>
<e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column field='Title' headerText='Title' width='170'></e-column>
</e-columns>
</ejs-grid>
</div>
</template>
<script>
import Vue from "vue";
import { GridPlugin, RecordClickEventArgs } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { closest } from '@syncfusion/ej2-base';
Vue.use(GridPlugin);
export default {
data: () => {
return {
data: employeeData,
cTemplate: function () {
return { template : Vue.component('columnTemplate',{
template: `<div class="image">
<button class="empData">Employee Data</button>
</div>`
})}
}
};
},
methods: {
recordClick(args) {
if (args.target.classList.contains('empData')) {
var rowObj = this.$refs.grid.ej2Instances.getRowObjectFromUID(closest(args.target, '.e-row').getAttribute('data-uid')
);
console.log(rowObj);
}
}
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/material.css";
</style>