How to change background color of row on checkbox column click in Vue TreeGrid?
This article explains how to change the background color of a row when the checkbox column is clicked in the Vue TreeGrid component.
The checkboxChange event triggers when the checkbox state changes in the checkbox column. You can use this event to change the background color and text color of the row based on e-check, e-uncheck, or e-stop checkbox states.
To change background color of the row, follow the given steps,
- Declare the function checkboxChange and write the below conditions.
- Select e-check class using queryselector and add class bgcolor class if the arg.checked value is true, and remove this class when the value is false.
App.vue
<script>
import { TreeGridComponent, ColumnsDirective, ColumnDirective, Page } from '@syncfusion/ej2-vue-treegrid';
let dataSource = [{
taskID: 1, taskName: 'Planning', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), progress: 100, duration: 5, priority: 'Normal', approved: false,
subtasks: [
{ taskID: 2, taskName: 'Plan timeline', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, priority: 'Normal', approved: false },
{ taskID: 3, taskName: 'Plan budget', startDate: new Date('02/03/2017'), endDate: new Date('02/07/2017'), duration: 5, progress: 100, approved: true },
]
},
{
taskID: 4, taskName: 'Design', startDate: new Date('02/10/2017'), endDate: new Date('02/14/2017'), duration: 3, progress: 86, priority: 'High', approved: false,
subtasks: [
{ taskID: 5, taskName: 'Software Specification', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 60, priority: 'Normal', approved: false },
{ taskID: 6, taskName: 'Develop prototype', startDate: new Date('02/10/2017'), endDate: new Date('02/12/2017'), duration: 3, progress: 100, priority: 'Critical', approved: false },
]
},
{
taskID: 7, taskName: 'Implementation Phase', startDate: new Date('02/17/2017'), endDate: new Date('02/27/2017'), priority: 'Normal', approved: false, duration: 11,
subtasks: [
{
taskID: 8, taskName: 'Phase 1', startDate: new Date('02/17/2017'), endDate: new Date('02/27/2017'), priority: 'High', approved: false, duration: 11,
}]
}];
export default {
name: "App",
components: {
'ejs-treegrid': TreeGridComponent,
"e-columns": ColumnsDirective,
"e-column": ColumnDirective,
},
data() {
return {
data: dataSource
};
},
provide: {
treegrid: [Page]
},
methods: {
checkboxChange(args) {
if (args.checked) {
setTimeout(() => {
const checkedRows = document.querySelectorAll('.e-check');
Array.from(checkedRows).map((row) => {
row.closest('tr').classList.add('bgcolor');
});
}, 0);
} else {
setTimeout(() => {
const coloredRows = document.querySelectorAll('.bgcolor');
Array.from(coloredRows).map((row) => {
if (row.querySelector('.e-uncheck') || row.querySelector('.e-stop')) {
row.classList.remove('bgcolor');
}
});
}, 0);
}
}
}
};
</script>
<template>
<ejs-treegrid ref="treegrid" :dataSource='data' :treeColumnIndex='1' childMapping='subtasks'
:checkboxChange=this.checkboxChange :enableCollapseAll="true" :autoCheckHierarchy="true"
:pageSettings='pageSettings'>
<e-columns>
<e-column field='taskID' headerText='Task ID' textAlign='Right' width=70></e-column>
<e-column field='taskName' headerText='Task Name' textAlign='Left' showCheckbox='true' width=200></e-column>
<e-column field='startDate' headerText='Start Date' textAlign='Right' format='yMd' width=90></e-column>
<e-column field='duration' headerText='Duration' textAlign='Right' width=80></e-column>
</e-columns>
</ejs-treegrid>
</template>
<style>
.bgcolor td {
background-color: cadetblue !important;
color: antiquewhite !important;
}
@import "../node_modules/@syncfusion/ej2-base/styles/material.css";
@import "../node_modules/@syncfusion/ej2-vue-treegrid/styles/material.css";
</style>
Result
Sample: View Sample in GitHub
Conclusion
We hope you enjoyed learning how to change the background color of a row when the checkbox column is clicked in the Vue TreeGrid component.
You can refer to our Vue Diagram feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our Vue Diagram example to understand how to create and manipulate data.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, BoldDesk Support, or feedback portal. We are always happy to assist you!
