We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

Set background color on selected row in treegrid

Hi ,

I need to set background color when user select a row in treegrid. below is the code but it is not working

  <ejs-treegrid #treeGrid [dataSource]='dataManager' [allowPaging]='true'
                        [pageSettings]='pageSettings' [editSettings]='editSettings' [toolbar]='toolbar'
                        (toolbarClick)="toolbarClick($event)" (actionFailure)="onActionFailure($event)"
                        (actionComplete)="actionComplete($event)" [treeColumnIndex]='1' idMapping='id'
                        parentIdMapping='root' hasChildMapping='hasChildren' (click)="rowClick($event)">
                            <e-column field='id' isPrimaryKey='true' [visible]='false' headerText='id'>
                            <e-column field='code' headerText='Code'>
                                <ng-template #template let-dataManager>
                                        <i class="fas fa-tags" *ngIf="dataManager.kind==='tag'"></i>{{dataManager.code}}
                            <e-column field='name' headerText='Name'></e-column>
                            <e-column field='description' headerText='Description' width='0'></e-column>

app componet row click

rowClick(e: any): void {

        let row = this.treegrid.getRowInfo(e.target).row;
    if (!isNullOrUndefined(row)) {
      let prevSelectedRows = this.treegrid.getContent().querySelectorAll('.bgcolor');
      for (let i = 0; i < prevSelectedRows.length; i++) {

1 Reply

PK Padmavathy Kamalanathan Syncfusion Team November 18, 2019 04:50 AM UTC

Hi Dayakar,

Thanks for contacting Syncfusion Forums.

QUERY: Set background color on selected row in treegrid

From your query we understand that you need to set background color when a row has been selected. This can be achieved in css level. By changing the background color assigned to the class name "e-active" you can change the background color of selected row (when a row is being selected, class name "e-active" is set to each cell of the selected row by default and when you change that class name's background color, you can change the background color of the selected row.

Please check the below code snippet,

.e-treegrid td.e-active { 
  background-color: green;

Please check the below sample,

Please check the below screenshot,

If you have further queries, please get back to us.

Padmavathy Kamalanathan

Live Chat Icon For mobile
Up arrow icon