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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

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,

Please check the below screenshot,



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

Regards,
Padmavathy Kamalanathan


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon