Contents
- Conditional cell formatting
- Theme
Having trouble getting help?
Contact Support
Contact Support
Excel cell style customization in Vue Treegrid component
11 Jun 202415 minutes to read
Conditional cell formatting
TreeGrid cells in the exported Excel can be customized or formatted using excelQueryCellInfo
event. In this event, we can format the treegrid cells of exported PDF document based on the column cell value.
In the below sample, we have set the background color for Duration
column in the exported excel by args.cell
and backgroundColor
property.
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick' :queryCellInfo='queryCellInfo'
:excelQueryCellInfo='excelQueryCellInfo'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></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'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide, ref } from "vue";
import { TreeGridComponent as EjsTreegrid, Page, Toolbar, ExcelExport, ColumnDirective as EColumn,
ColumnsDirective as EColumns
} from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const treegrid = ref(null);
const data = sampleData;
const pageSettings = { pageSize: 7 };
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args['item'].text === 'Excel Export') {
treegrid.value.excelExport();
}
};
const excelQueryCellInfo = function(args) {
if(args.column.field == 'duration'){
if(args.value === 0 || args.value === "") {
args.style = {backColor: '#336c12'};
}
else if(args.value < 3) {
args.style = {backColor: '#7b2b1d'};
}
}
};
const queryCellInfo = function(args) {
if (args.data['duration'] == 0 && args.column.field === 'duration' ) {
args.cell.style.background= '#336c12';
} else if (args.data['duration'] < 3 && args.column.field === 'duration') {
args.cell.style.background= '#7b2b1d';
}
};
provide('treegrid', [ Page, Toolbar, ExcelExport ]);
</script>
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick' :queryCellInfo='queryCellInfo'
:excelQueryCellInfo='excelQueryCellInfo'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></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'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Page, Toolbar, ExcelExport, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
toolbarOptions: ['ExcelExport'],
pageSettings: { pageSize: 7 }
};
},
methods: {
toolbarClick(args) {
if (args['item'].text === 'Excel Export') {
this.$refs.treegrid.excelExport();
}
},
excelQueryCellInfo(args) {
if(args.column.field == 'duration'){
if(args.value === 0 || args.value === "") {
args.style = {backColor: '#336c12'};
}
else if(args.value < 3) {
args.style = {backColor: '#7b2b1d'};
}
}
},
queryCellInfo(args) {
if (args.data['duration'] == 0 && args.column.field === 'duration' ) {
args.cell.style.background= '#336c12';
} else if (args.data['duration'] < 3 && args.column.field === 'duration') {
args.cell.style.background= '#7b2b1d';
}
}
},
provide: {
treegrid: [ Page, Toolbar, ExcelExport ]
}
}
</script>
Theme
The excel export provides an option to include theme for exported excel document.
To apply theme in exported Excel, define the theme
in exportProperties
.
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></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'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script setup>
import { provide } from "vue";
import { TreeGridComponent as EjsTreegrid, Page, Toolbar, ExcelExport, ColumnDirective as EColumn,
ColumnsDirective as EColumns
} from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
const treegrid = ref(null);
const data = sampleData;
const pageSettings = { pageSize: 7 };
const toolbarOptions = ['ExcelExport'];
const toolbarClick = function(args) {
if (args['item'].text === 'Excel Export') {
let excelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
}
treegrid.value.excelExport(excelExportProperties);
}
};
provide('treegrid', [ Page, Toolbar, ExcelExport ]);
</script>
<template>
<div id="app">
<ejs-treegrid ref='treegrid' :dataSource='data' height='220' childMapping='subtasks' :treeColumnIndex='1' :allowPaging='true' :pageSettings='pageSettings' :allowExcelExport='true' :toolbar='toolbarOptions' :toolbarClick='toolbarClick'>
<e-columns>
<e-column field='taskID' headerText='Task ID' width='90' textAlign='Right'></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'></e-column>
<e-column field='duration' headerText='Duration' width='80' textAlign='Right'></e-column>
</e-columns>
</ejs-treegrid>
</div>
</template>
<script>
import { TreeGridComponent, Page, Toolbar, ExcelExport, ColumnDirective, ColumnsDirective } from "@syncfusion/ej2-vue-treegrid";
import { sampleData } from "./datasource.js";
export default {
name: "App",
components: {
"ejs-treegrid":TreeGridComponent,
"e-columns":ColumnsDirective,
"e-column":ColumnDirective,
},
data () {
return {
data: sampleData,
toolbarOptions: ['ExcelExport'],
pageSettings: { pageSize: 7 }
};
},
methods: {
toolbarClick(args) {
if (args['item'].text === 'Excel Export') {
let excelExportProperties = {
theme:
{
header: { fontName: 'Segoe UI', fontColor: '#666666' },
record: { fontName: 'Segoe UI', fontColor: '#666666' },
caption: { fontName: 'Segoe UI', fontColor: '#666666' }
}
}
this.$refs.treegrid.excelExport(excelExportProperties);
}
}
},
provide: {
treegrid: [ Page, Toolbar, ExcelExport ]
}
}
</script>
By default, material theme is applied to exported excel document.