How to change background color of row on checkbox column click in React TreeGrid?
This article explains how to change the background color of a row on a checkbox column click in the React TreeGrid component.
The checkboxChange event triggers when the checkbox state change 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 / e-stop checkbox states.
To change the 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.js
import {ColumnDirective,ColumnsDirective,Inject,TreeGridComponent,} from '@syncfusion/ej2-react-treegrid';
import { Page } from '@syncfusion/ej2-react-treegrid';
import * as React from 'react';
import './App.css';
import { sampleData } from './datasource';
export default class App extends React.Component {
checkboxChange(args) {
if (args.checked) {
setTimeout(() => {
const checkedRows = this.element.querySelectorAll('.e-check');
Array.from(checkedRows).map((row) => {
row.closest('tr').classList.add('bgcolor');
});
}, 0);
} else {
setTimeout(() => {
const coloredRows = this.element.querySelectorAll('.bgcolor');
Array.from(coloredRows).map((row) => {
if (row.querySelector('.e-uncheck') || row.querySelector('.e-stop')) {
row.classList.remove('bgcolor');
}
});
}, 0);
}
}
render() {
return (
<TreeGridComponent dataSource={sampleData} treeColumnIndex={1} childMapping="subtasks" enableCollapseAll="true" autoCheckHierarchy="true" checkboxChange={this.checkboxChange}>
<ColumnsDirective>
<ColumnDirective field="taskID" headerText="Task ID" width="90" textAlign="Right"/>
<ColumnDirective field="taskName" showCheckbox="true" headerText="Task Name" width="180"/>
<ColumnDirective field="startDate" headerText="Start Date" width="90" format="yMd" textAlign="Right" type="date"/>
<ColumnDirective field="duration" headerText="Duration" width="80" textAlign="Right"/>
</ColumnsDirective>
<Inject services={[Page]} />
</TreeGridComponent>
);}
}
App.css
@import url('https://cdn.syncfusion.com/ej2/20.1.55/material.css');
h1,
p {
font-family: Lato;
}
.bgcolor td {
background-color: rgb(207 183 183) !important;
color: white !important;
}
Result:
Refer to our documentation and online samples for more features. If you have any queries, please let us know in the comments below. You can also contact us through our Support forum or Support ticket. We are happy to assist you!
Conclusion
We hope you enjoyed learning about how to change background
color of row on checkbox column click in the React TreeGrid.
You can refer to our React TreeGrid feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our React TreeGrid example to understand how to create and manipulate data.
For current customers, you can check out our Document Processing Libraries from the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our 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!
