Set background color on selected row in treegrid

[Dayakar Reddy]

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-columns>

                            <e-column field='id' isPrimaryKey='true' [visible]='false' headerText='id'>

                            </e-column>

                            <e-column field='code' headerText='Code'>

                                <ng-template #template let-dataManager>

                                    <div>

                                        <i class="fas fa-tags" *ngIf="dataManager.kind==='tag'"></i>{{dataManager.code}}

                                    </div>

                                </ng-template>

                            </e-column>

                            <e-column field='name' headerText='Name'></e-column>

                            <e-column field='description' headerText='Description' width='0'></e-column>

                        </e-columns>

                    </ejs-treegrid>

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++) {

        prevSelectedRows[i].classList.remove('bgcolor');

      }

      row.classList.add('bgcolor');

    }

  }

[Padmavathy Kamalanathan]

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,

https://stackblitz.com/edit/angular-v4ptsv-htazxu

Please check the below screenshot,

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

Regards,

Padmavathy Kamalanathan