Set background color on selected row in treegrid

Thread ID:	Created:	Updated:	Platform:	Replies:
149145	Nov 15,2019 03:51 PM UTC	Nov 18,2019 04:50 AM UTC	Angular - EJ 2	1

Subscribe to this post

Tags: TreeGrid

Dayakar Reddy

Asked On November 15, 2019 03:51 PM UTC

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');

}

Reply | Reply with quote

Padmavathy Kamalanathan [Syncfusion]

Replied On 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,

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

Reply | Reply with quote

Set background color on selected row in treegrid

Thread ID:

Created:

Updated:

Platform:

Replies:

Please sign in to access our forum

CONTACT US