Articles in this section
Category / Section

How to change background color of row on checkbox column click in Angular TreeGrid?

2 mins read

This article explains how to change background color of row on checkbox column click in Angular TreeGrid component.

The checkboxChange event triggers when the check box state change in 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 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.component.ts

import { Component, OnInit, ViewChild } from '@angular/core';
import { sampleData } from './jsontreegriddata';
import {TreeGridComponentPageService,} from '@syncfusion/ej2-angular-treegrid';
@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [PageService],
})
export class AppComponent {
  public data: Object[] = [];
  @ViewChild('treegrid')
  public treegrid!: TreeGridComponent;
  ngOnInit(): void {
    this.data = sampleData;
  }
  checkboxChange(args:any) {
    if (args.checked) {
      setTimeout(() => {
        const checkedRows = this.treegrid.element.querySelectorAll('.e-check');
        Array.from(checkedRows).map((row) => {
          row?.closest('tr')?.classList.add('bgcolor');
        });
      }, 0);
    } else {
      setTimeout(() => {
        const coloredRows = this.treegrid.element.querySelectorAll('.bgcolor');
        Array.from(coloredRows).map((row) => {
          if (row.querySelector('.e-uncheck') || row.querySelector('.e-stop')) {
            row.classList.remove('bgcolor');
          }
        });
      }, 0);
    }
  }
}

 

app.module.ts

import { TreeGridAllModule } from '@syncfusion/ej2-angular-treegrid';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { RouterModule } from '@angular/router';
import { CommonModule } from '@angular/common';
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
 
@NgModule({ declarations: [ AppComponent ], imports: [ CommonModule, TreeGridAllModule, ReactiveFormsModule, FormsModule,BrowserModule], providers: [], bootstrap: [AppComponent]
})
export class AppModule { }

 

app.component.html

<div class="control-section">
  <ejs-treegrid
    #treegrid
    [dataSource]="data"
    height="350"
    enableCollapseAll="true"
    autoCheckHierarchy="true"
    childMapping="subtasks"
    [treeColumnIndex]="1"
    (checkboxChange)="checkboxChange($event)"
  >
    <e-columns>
      <e-column
        field="taskID"
        headerText="Task ID"
        isPrimaryKey="true"
        width="70"
        textAlign="Right"
      ></e-column>
      <e-column
        field="taskName"
        headerText="Task Name"
        width="200"
        [showCheckbox]="true"
      ></e-column>
    </e-columns>
  </ejs-treegrid>
</div>

 

index.html

<style>
  
      .bgcolor td {
 
        background-color: rgb(207 183 183) !important;
 
        color: white !important;
 
      }
 
    </style>
 

 

Result

Graphical user interface, text, application

Description automatically generated

 

View Sample in GitHub

View Sample in StackBlitz

 

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!

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please  to leave a comment
Access denied
Access denied