Change color text of certain treeview children

[Laurens Albers]

Hi,

I would like to change the text color(sort of grayed out idea) of certain children of a treeview based on a criteria. But i'm having some trouble to edit any of them(css) at all. Do you have a example on how to change the color text of specific children?

Thank you in advance!

greetings,

Laurens

[Shalini Maragathavel]

Hi Laurens, 

Greetings from Syncfusion support. 

Based on your query, we suspect that you need to change the text color of the child nodes in TreeView component. You can achieve your requirement of changing text color to the child nodes by using the below css, 

App.component.ts 

<div id='treeparent'> 

    <ejs-treeview id='treeElement' #treevalidate [fields]='field' [cssClass]='cssClass'></ejs-treeview> 

</div> 

export class AppComponent { 

   

  public cssClass: string = 'mytree'; 

} 

--------------------------------------------------------------------
App.component.css

/*apply custom css to second level*/
.mytree .e-level-2 > .e-text-content .e-list-text { 

  color: darkmagenta; 

} 

/*apply custom css to all the leaf nodes*/ 

.mytree .e-level-3 > .e-text-content .e-list-text { 

  color: royalblue; 

} 

Please find the below sample for your reference, 

Sample: https://stackblitz.com/edit/angular-odr3yb?file=app.component.css 

UG Link: https://ej2.syncfusion.com/angular/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels/ 

API Link: https://ej2.syncfusion.com/angular/documentation/api/treeview/#cssclass 

Please let us know if you need further assistance. 

Regards, 

Shalini M. 

[Laurens Albers]

Hi

Thank you for your response, but maybe i should elaborate my query/request some more.

I have added a file(zip containing image) as an example. As you can see level 3 can have a mix of colors depending a certain criteria. Not all of level 3 are black and not all of level 4 are black.

How would I identify and then color a row based on your example?

greetings,

Laurens

Attachment: tempsnip_81c1193f.zip

[Shalini Maragathavel]

Hi Laurens, 

Good day to you. 

Based on your query, we suspect that you need to apply custom styles for the nodes in TreeView component based on certain criteria from data source. You can achieve your requirement by rendering the TreeView with templates based on multiple conditions and apply the custom styles to the nodes using ngif condition as demonstrated in the below code snippet, 

app.component.html 

            <ejs-treeview id="template" [fields]="field"> 

                <ng-template #nodeTemplate="" let-data=""> 

                    <div> 

                        <div class="treeviewdiv" *ngIf="data.prority =='normal' ;  else condition2"> 

                            <div class="normal"> 

                                <span class="treeName1">{{data.name}}</span> 

                            </div> 

                        </div> 

                        <ng-template #condition2> 

                            <div class="treeviewdiv" *ngIf="data.prority == 'high';  else condition3"> 

                                <div class="highlevel"> 

                                    <span class="treeName2">{{data.name}}</span> 

                        </ng-template> 

                        <ng-template #condition3> 

                            <div class="treeviewdiv"> 

                                <div class="lowlevel"> 

                                    <span class="treeName3">{{data.name}}</span> 

                        </ng-template> 

                    </div> 

                </ng-template> 

            </ejs-treeview> 

In the below sample, we have added custom styles to the nodes based on the priority field of TreeView data source. Similarly, you can modify the condition based on any field within your dataSource and customize the nodes based on your preference 

Please find the below sample for your reference, 

Sample: https://stackblitz.com/edit/custom-styles-for-nodes-based-on-condition?file=app.component.html 

Please let us know if you need further assistance. 

Regards, 

Shalini M.