Column template in Vue Grid component
10 Jul 202424 minutes to read
Grid component provides a template option that allows you to display custom elements in a column instead of the field value. This can be useful when you need to display images, buttons, or other custom content within a column.
When using template columns, they are primarily meant for rendering custom content and may not provide built-in support for grid actions like sorting, filtering, editing. It is must to define the
field
property of the column to perform any grid actions.
Render image in a column
To render an image in a grid column, you need to define a template for the column using the template property. The template
property expects the HTML element or a function that returns the HTML element.
The following example demonstrates how to define a template for the Employee Image field that displays an image element. The template
property is set to the HTML element that contains an image tag. You have utilized the src
and alt
attributes to an image tag.
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Employee Image' width='150' textAlign='Center' :template="'columnTemplate'"></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>
<template v-slot:columnTemplate="{data}">
<div class="image">
<img :src="'./images/' + data.EmployeeID + '.png'" :alt="data.EmployeeID"/>
</div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
const data = employeeData;
</script>
<style>
.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);
}
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Employee Image' width='150' textAlign='Center' :template="'columnTemplate'"></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>
<template v-slot:columnTemplate="{data}">
<div class="image">
<img :src="'./images/' + data.EmployeeID + '.png'" :alt="data.EmployeeID"/>
</div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data: () => {
return {
data: employeeData,
};
}
}
</script>
<style>
.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);
}
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Render hyperlink in a column
The Grid component provides support for rendering hyperlink columns and performing routing on click using the template property. This feature is useful when displaying data that requires a link to another page or website.
The following example demonstrates, how to render hyperlink column in the Grid using the template property of the e-column
tag. To define a template
for the column, you can use the template
with the a
tag to create the hyperlink. The onClick function is triggered when the hyperlink is clicked.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='FirstName' headerText='FirstName' width='120' :template="'columnTemplate'"></e-column>
</e-columns>
<template v-slot:columnTemplate="{ data }">
<a href="#" @click="onClick(data.FirstName)">{{ data.FirstName }}</a>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
const data = employeeData;
const onClick = (firstName) => {
var url = 'https://www.google.com/search?q=';
var searchUrl = url + firstName;
window.open(searchUrl);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='FirstName' headerText='FirstName' width='120' :template="'columnTemplate'"></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<a href="#" @click="onClick(data.FirstName)">{{data.FirstName}}</a>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: employeeData,
}
},
methods: {
onClick(firstName) {
var url = 'https://www.google.com/search?q=';
var searchUrl = url + firstName;
window.open(searchUrl);
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
The window.open() method is a built-in JavaScript function that opens a new browser window or tab with the specified URL.
Render other components in a column
The column template has options to render a custom component in a grid column instead of a field value.
Render LineChart component in a column
The LineChart component of Syncfusion provides an elegant way to represent and compare data over time. It displays data points connected by straight line segments to visualize trends in data.
In the following example, we rendered the Sparkline Chart component in the Grid column by defining the template property.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315 :created="renderGridSparkline">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='First Name' width=150></e-column>
<e-column headerText='Employee Performance Rating' width='280' :template="'lineChartTemplate'"></e-column>
</e-columns>
<template v-slot:lineChartTemplate="{data}">
<div><ejs-sparkline :dataSource="getSparkData('line', data.EmployeeID + 1)" height="50px" :width="'90%'" :lineWidth="2" valueType="Numeric" :fill="'#3C78EF'"></ejs-sparkline></div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { SparklineComponent as EjsSparkline } from "@syncfusion/ej2-vue-charts";
const data = employeeData;
const lineData = [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, -6, 4, 1, -3, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
];
const getSparkData = (type, count) => {
if (type === 'line') {
return lineData[count - 1];
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315 :created="renderGridSparkline">
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' width='130' textAlign='Right'></e-column>
<e-column field='FirstName' headerText='First Name' width=150></e-column>
<e-column headerText='Employee Performance Rating' width='280' :template="'lineChartTemplate'"></e-column>
</e-columns>
<template v-slot:lineChartTemplate="{data}">
<div><ejs-sparkline :dataSource="getSparkData('line', data.EmployeeID + 1)" height="50px" :width="'90%'" :lineWidth="2" valueType="Numeric" :fill="'#3C78EF'"></ejs-sparkline></div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { SparklineComponent } from "@syncfusion/ej2-vue-charts";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-sparkline":SparklineComponent
},
data: () => {
return {
data: employeeData,
lineData: [
[0, 6, -4, 1, -3, 2, 5],
[5, -4, 6, 3, -1, 2, 0],
[6, 4, 0, 3, -2, 5, 1],
[4, -6, 3, 0, 1, -2, 5],
[3, 5, -6, -4, 0, 1, 2],
[1, -3, 4, -2, 5, 0, 6],
[2, 4, 0, -3, 5, -6, 1],
[5, 4, -6, 3, 1, -2, 0],
[0, -6, 4, 1, -3, 2, 5],
[6, 4, 0, -3, 2, -5, 1],
],
};
},
methods: {
getSparkData(type, count) {
if (type === 'line') {
return this.lineData[count - 1];
}
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Render ColorPicker component in a column
The ColorPicker component of Syncfusion provides a user-friendly way to select colors from a pre-defined color palette or custom colors. It can be used in a variety of scenarios such as picking a theme color or changing the color of an element on a page.
In the following code, we rendered the ColorPicker component in the Grid column by defining the template property.
<div>
<ejs-colorpicker mode="Palette" :change="change"></ejs-colorpicker>
</div>
<template>
<div id="app">
<ejs-grid ref='grid' id='grid' :dataSource='data' height='315px'>
<e-columns>
<e-column field='FirstName' headerText='FirstName' width=100></e-column>
<e-column field='LastName' headerText='Last Name' width=100></e-column>
<e-column field='City' headerText='City' width=100></e-column>
<e-column headerText='Change the color of row' width='120' :template="'colorPickerTemplate'" textAlign='Center'></e-column>
</e-columns>
<template v-slot:colorPickerTemplate>
<div><ejs-colorpicker mode="Palette" :change="change"></ejs-colorpicker></div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ColorPickerComponent as EjsColorpicker } from '@syncfusion/ej2-vue-inputs';
import { employeeData } from './datasource.js';
import { ref } from 'vue';
const grid = ref(null);
const data = employeeData;
const change = function (args) {
const selectedRows = grid.value.ej2Instances.getSelectedRows();
for (const row of selectedRows) {
row.style.backgroundColor = args.value;
}
grid.value.ej2Instances.clearSelection();
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid ref='grid' id='grid' :dataSource='data' height='315px' >
<e-columns>
<e-column field='FirstName' headerText='FirstName' width=100></e-column>
<e-column field='LastName' headerText='Last Name' width=100></e-column>
<e-column field='City' headerText='City' width=100></e-column>
<e-column headerText='Change the color of row' width='120' :template="'colorPickerTemplate'" textAlign='Center'></e-column>
</e-columns>
<template v-slot:colorPickerTemplate>
<div><ejs-colorpicker mode="Palette" :change="change"></ejs-colorpicker></div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ColorPickerComponent } from '@syncfusion/ej2-vue-inputs';
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-colorpicker":ColorPickerComponent
},
data() {
return {
data: employeeData,
};
},
methods: {
change: function (args) {
const grid = this.$refs.grid.$el.ej2_instances[0];
const selectedRows = grid.getSelectedRows();
for (const row of selectedRows) {
row.style.backgroundColor = args.value;
}
grid.clearSelection();
}
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Render DropDownList component in a column
To render a custom component in a grid column, you need to define a template for the column using the template
property. In the following code, we rendered the DropDownList component in the Order Status column by defining the template
property.
<div>
<ejs-dropdownlist id='dropdownlist' :dataSource='dropData' :value='data.OrderStatus' :popupHeight='250' :popupWidth='150' width="100"> </ejs-dropdownlist>
</div>
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column headerText='Order Status' :template="'dropdownTemplate'" width=200></e-column>
</e-columns>
<template v-slot:dropdownTemplate="{data}">
<div><ejs-dropdownlist id='dropdownlist' :dataSource='dropData' :value='data.OrderStatus' :popupHeight='250' :popupWidth='150' width="150"> </ejs-dropdownlist></div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent as EjsDropdownlist } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
const dropData = ['Order Placed', 'Processing', 'Delivered'];
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' >
<e-columns>
<e-column field='OrderID' headerText='Order ID' textAlign='Right' width=90></e-column>
<e-column field='CustomerID' headerText='Customer ID' width=100></e-column>
<e-column field='Freight' headerText='Freight' textAlign='Right' format='C2' width=90></e-column>
<e-column headerText='Order Status' :template="'dropdownTemplate'" width=200></e-column>
</e-columns>
<template v-slot:dropdownTemplate="{data}">
<div><ejs-dropdownlist id='dropdownlist' :dataSource='dropData' :value='data.OrderStatus' :popupHeight='250' :popupWidth='150' width="150"> </ejs-dropdownlist></div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { DropDownListComponent } from "@syncfusion/ej2-vue-dropdowns";
import { data } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-dropdownlist":DropDownListComponent
},
data() {
return {
data: data,
dropData: ['Order Placed', 'Processing', 'Delivered'],
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Render Chip component in a column
The Grid component provides support for rendering Chips component in a column using the template property. This feature is useful when displaying data that requires a chip component to be rendered in a column.
In the following code, we rendered the Chips component in the Grid First Name column by defining the template property.
<div>
<ejs-chiplist id="chip" text="data.FirstName"></ejs-chiplist>
</div>
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' >
<e-columns>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
<e-column field='FirstName' headerText='FirstName' :template="'chipTemplate'" width=200></e-column>
</e-columns>
<template v-slot:chipTemplate="{data}">
<div><ejs-chiplist id="chip" :text='data.FirstName'></ejs-chiplist></div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { ChipListComponent as EjsChiplist } from '@syncfusion/ej2-vue-buttons';
import { employeeData } from './datasource.js';
const data = employeeData;
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource='data' height='315px' >
<e-columns>
<e-column field='LastName' headerText='Last Name' width=150></e-column>
<e-column field='City' headerText='City' width=150></e-column>
<e-column field='FirstName' headerText='FirstName' :template="'chipTemplate'" width=200></e-column>
</e-columns>
<template v-slot:chipTemplate="{data}">
<div><ejs-chiplist id="chip" :text='data.FirstName'></ejs-chiplist></div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { ChipListComponent } from '@syncfusion/ej2-vue-buttons';
import { employeeData } from './datasource.js';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-chiplist":ChipListComponent
},
data() {
return {
data: employeeData,
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Using condition template
The conditional column template allows you to display template elements based on specific conditions.
The following example demonstrates how to use the template
property add v-if
directive to render the checkbox based on the value of the Discontinued field. The Discontinued field will render a checkbox in each row for which the value of the Discontinued field is true.
<div v-if=cData class="template_checkbox">
<input type="checkbox" checked />
</div>
<div v-else class="template_checkbox">
<input type="checkbox" />
</div>
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Discontinued' width='150' textAlign='Center' :template="'columnTemplate'"></e-column>
<e-column field='ProductID' headerText='Product ID' width=150></e-column>
<e-column field='CategoryName' headerText='Category Name' width=150></e-column>
<e-column field='ProductName' headerText='Product Name' width=150></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div v-if=data.Discontinued class="template_checkbox">
<input type="checkbox" checked />
</div>
<div v-else class="template_checkbox">
<input type="checkbox" />
</div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { productData } from "./datasource.js";
const data = productData;
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid :dataSource="data" height=310>
<e-columns>
<e-column headerText='Discontinued' width='150' textAlign='Center' :template="'columnTemplate'"></e-column>
<e-column field='ProductID' headerText='Product ID' width=150></e-column>
<e-column field='CategoryName' headerText='Category Name' width=150></e-column>
<e-column field='ProductName' headerText='Product Name' width=150></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div v-if=data.Discontinued class="template_checkbox">
<input type="checkbox" checked />
</div>
<div v-else class="template_checkbox">
<input type="checkbox" />
</div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { productData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data: () => {
return {
data: productData,
};
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
You can use any template element or custom component instead of the checkbox in the conditional template based on your requirement.
How to get the row object by clicking on the template element
The Grid component allows you to retrieve the row object of the selected record when clicking on a template element. This feature can be useful when you need to perform custom actions based on the selected record.
In the following code, the button element is rendered in the Employee Data column and click
event binding is used to call the showDetails method when the template element is clicked. The showDetails method is passed the data object as an argument, which allows you to access the selected row object and display it in the dialog popup.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width='130'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column headerText='Employee Data' width='150' textAlign='Right' :template="'columnTemplate'" isPrimaryKey='true'></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div>
<ejs-button class="empData" v-on:click="showDetails(data)">View</ejs-button>
<ejs-dialog ref="dialog" :visible="false" width="50%" showCloseIcon="true" :beforeOpen="contentShow" :header="header">
</ejs-dialog>
</div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { DialogComponent as EjsDialog } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent as EjsButton } from '@syncfusion/ej2-vue-buttons';
import { ref } from "vue";
const dialog = ref(null);
const selectedRecord = ref(null)
const header = "Selected Row Details"
const data = employeeData;
const showDetails = function(rowData) {
selectedRecord.value = rowData;
dialog.value.show();
}
const contentShow = function() {
if (selectedRecord.value) {
const dialogContent = `
<p><b>EmployeeID:</b>${this.selectedRecord.EmployeeID}</p>
<p><b>FirstName:</b>${this.selectedRecord.FirstName}</p>
<p><b>LastName:</b>${this.selectedRecord.LastName}</p>`;
dialog.value.$el.querySelector(".e-dlg-content").innerHTML = dialogContent;
}
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<e-column field='EmployeeID' headerText='Employee ID' textAlign='Right' width='130'></e-column>
<e-column field='FirstName' headerText='Name' width='120'></e-column>
<e-column headerText='Employee Data' width='150' textAlign='Right' :template="'columnTemplate'" isPrimaryKey='true'></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div>
<ejs-button class="empData" v-on:click="showDetails(data)">View</ejs-button>
<ejs-dialog ref="dialog" :visible="false" width="50%" showCloseIcon="true" :beforeOpen="contentShow" :header="header">
</ejs-dialog>
</div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { employeeData } from "./datasource.js";
import { DialogComponent } from '@syncfusion/ej2-vue-popups';
import { ButtonComponent } from '@syncfusion/ej2-vue-buttons';
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
"ejs-button":ButtonComponent,
"ejs-dialog":DialogComponent
},
data: () => {
return {
data: employeeData,
};
},
methods: {
showDetails(rowData) {
this.selectedRecord = rowData;
this.$refs.dialog.show();
},
contentShow() {
if (this.selectedRecord) {
const dialogContent = `
<p><b>EmployeeID:</b>${this.selectedRecord.EmployeeID}</p>
<p><b>FirstName:</b>${this.selectedRecord.FirstName}</p>
<p><b>LastName:</b>${this.selectedRecord.LastName}</p>`;
this.$refs.dialog.$el.querySelector(".e-dlg-content").innerHTML = dialogContent;
}
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
Use custom helper inside the template
The Syncfusion Grid allows you to use custom helpers inside the column template. This feature allows you to create complex templates that can incorporate additional helper functions that are not available through the default template syntax.
To use the custom helper function inside a column template, you must first add the function to the template’s context. This can be done by using the let keyword to create a new variable that references the function.
The following example demonstrates how to use a custom helper function inside the template property for the Freight column.
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<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 :template="'columnTemplate'"></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' type='date' format='yMd' width=120></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div>
{{ formatCurrency(data.Freight) }}
</div>
</template>
</ejs-grid>
</div>
</template>
<script setup>
import { GridComponent as EjsGrid, ColumnDirective as EColumn, ColumnsDirective as EColumns } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
const formatCurrency= (value) => {
return '₹ ' + value.toFixed(3);
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>
<template>
<div id="app">
<ejs-grid ref="grid" :dataSource="data" height=315>
<e-columns>
<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 :template="'columnTemplate'"></e-column>
<e-column field='OrderDate' headerText='Order Date' textAlign='Right' type='date' format='yMd' width=120></e-column>
</e-columns>
<template v-slot:columnTemplate="{data}">
<div>
{{ formatCurrency(data.Freight) }}
</div>
</template>
</ejs-grid>
</div>
</template>
<script>
import { GridComponent, ColumnsDirective, ColumnDirective } from "@syncfusion/ej2-vue-grids";
import { data } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-grid":GridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective
},
data: () => {
return {
data: data,
}
},
methods: {
formatCurrency(value) {
return '₹ ' + value.toFixed(3);
},
},
}
</script>
<style>
@import "../node_modules/@syncfusion/ej2-base/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-buttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-calendars/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-dropdowns/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-inputs/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-navigations/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-popups/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-splitbuttons/styles/tailwind.css";
@import "../node_modules/@syncfusion/ej2-vue-grids/styles/tailwind.css";
</style>