Formatting treeView

Hi,

How can we format the treeview like as shown below?



3 Replies

SP Sowmiya Padmanaban Syncfusion Team March 4, 2020 10:51 AM UTC

 
Hi Alex,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query. You can change the TreeView component based on your requirement using CSS Styles. 
 
Refer the below code snippet. 
<style> 
    /*align border for Treeview*/ 
   .e-treeview .e-text-content  { 
        border: 1px solid black!important; 
    } 
   /*Chnage the expand and collapse icon*/ 
   .e-treeview .e-icon-collapsible::before, .e-treeview .e-icon-expandable::before { 
       content: '\e7f9' !important; 
   } 
</style> 
 
 
Refer the below sample link for your reference. 
 
You can find the Icon CSS in below link. 
 
To more about the TreeView component. Refer the below link. 
 
 
 
Please let us know, if you need any further assistance. 
 
 
Regards,  
Sowmiya.P 



AL Alex March 4, 2020 10:53 AM UTC

Thanks for the quick response, we'll try this and get back to you with any issues.


SA Shameer Ali Baig Sulaiman Ali Baig Syncfusion Team March 4, 2020 11:03 AM UTC

Hi Alex, 
  
Welcome! We will wait to hear from you. 
  
Regards, 
Shameer Ali Baig S. 


Loader.
Up arrow icon