How to change Chevron Icon to custom icon in Tree view?

[ameya kelkar]

I need to change Chevron Icon to Plus or Minus icons in tree view, but could not find any option.

[Indhumathy Loganathan]

Hi Ameya, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in TreeView component. You can customize the TreeView expand and collapse icons by using the cssClass property of TreeView. 

 

Please refer to the code snippets. 

 

.custom.e-treeview .e-list-item .e-icon-expandable::before { 

  content: "\e823"; 

} 

 

.custom.e-treeview .e-list-item .e-icon-collapsible::before { 

  content: "\e934"; 

} 

 

.custom .e-list-item .e-icons.e-icon-collapsible { 

  transform: none; 

} 

 

Please find the sample demonstrating the solution. 

 

https://stackblitz.com/edit/react-treeview-icon?file=index.js 

 

UG Link: https://ej2.syncfusion.com/react/documentation/treeview/how-to/customize-the-expand-and-collapse-icons/ 

 

Please refer to the below links to know more about EJ2 TreeView component. 

 

Demos: https://ej2.syncfusion.com/react/demos/#/material/treeview/default  

 

Documentation: https://ej2.syncfusion.com/react/documentation/treeview/  

 

API Reference: https://ej2.syncfusion.com/react/documentation/api/treeview/ 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L

[ameya kelkar]

Hi thanks for quick reply, but can we use TreeViewComponent in Gantt? I want to change icons in Gantt Chart.

[Monisha Sivanthilingam]

Hi Ameya, 

 

We do not need to use the TreeView component in Gantt to change the icons. We have made use of the CSS classes of the expander and collapse icon to change them according to your needs. The following code snippets demonstrate the solution. 

 

Index.css 

.e-treegrid .e-treegridexpand::before { 

  content: "\e934"; 

} 

.e-treegrid .e-treegridcollapse::before { 

  content: "\e823"; 

} 

.e-treegrid .e-treegridexpand { 

  transform: none; 

} 

 

We have prepared a sample for your reference. 

 

Please contact us if you require any further assistance. 

 

Regards, 

Monisha. 

[ilyas aktas]

If the icon of the root element in the treeview is users, if the icon of the child element is user, can you help me?

[Lokesh Arjunan]

Hi Ilyas aktas 

 

Could you please elaborate on your requirement. We've listed some of the queries. Please clarify if your requirement is one of the following, if not, please share it with more details. 

 

1. Whether need to render TreeView component in one of the columns in Gantt. 

2. Whether need to render different icons for different parent levels for expand/collapse icons. 

 

Regards, 

Lokesh