Cell in Vue Treegrid component
16 Mar 20237 minutes to read
Customize cell styles
The appearance of cells can be customized by using the queryCellInfo
event. The queryCellInfo
event triggers for every cell. In that event handler, you can get QueryCellInfoEventArgs
that contains the details of the cell.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' :queryCellInfo='customiseCell'>
<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='duration' headerText='Duration' width=80 textAlign='Right'></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,
};
},
methods: {
customiseCell: function(args) {
if (args.column.field === 'progress' && +args.cell.innerHTML > 90 && +args.cell.innerHTML <= 100){
args.cell.setAttribute('style', 'background-color:#336c12;color:white;');
} else if (+args.cell.innerHTML > 20 && args.column.field === 'progress') {
args.cell.setAttribute('style', 'background-color:#7b2b1d;color:white;');
}
}
}
}
</script>
Custom attributes
You can customize the treegrid cells by adding a CSS class to the customAttribute
property of the column.
.e-attr {
background: '#d7f0f4';
}
{
field: 'taskID', headerText: 'Task ID', width: 90, customAttributes: {class: "e-attr"}, textAlign: 'Right'
}
In the below example, we have customized the cells of TaskID
and StartDate
columns.
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width=90 textAlign='Right' :customAttributes= "{class: 'e-attr'}"></e-column>
<e-column field='taskName' headerText='Task Name' width=160></e-column>
<e-column field='startDate' headerText='Start Date' width=90 format="yMd" textAlign='Right' :customAttributes= "{class: 'e-attr'}"></e-column>
<e-column field='duration' headerText='Duration' 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,
};
},
}
</script>
<style>
.e-attr {
background: #d7f0f4;
}
</style>
Grid lines
The gridLines
have option to display cell border and it can be defined by the
gridLines
property.
The available modes of grid lines are:
Modes | Actions |
---|---|
Both | Displays both the horizontal and vertical grid lines. |
None | No grid lines are displayed. |
Horizontal | Displays the horizontal grid lines only. |
Vertical | Displays the vertical grid lines only. |
Default | Displays grid lines based on the theme. |
<template>
<div id="app">
<ejs-treegrid :dataSource='data' childMapping='subtasks' :treeColumnIndex='1' height='300px' gridLines='Both'>
<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='duration' headerText='Duration' width=80 textAlign='Right'></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,
};
}
}
</script>
By default, the treegrid renders with
Default
mode.