background-color

Hello,

How can we set the background-color for the full row (e-fullrow) in tree view, want to do this dynamically based on node value.

1 Reply

SP Sowmiya Padmanaban Syncfusion Team March 30, 2020 11:22 AM UTC

Hi Umair,  
 
Greetings from Syncfusion support. 
 
We have checked your reported query (set background for Nodes) in TreeView component. Yes, it is possible to achieve in TreeView component. 
 
In TreeView component, we have provided the htmlAttributes fields in Datasource. Using that fields, you can able to customize the each TreeView node items. 
 
Refer the below code snippet. 
   public field:Object ={ dataSource: this.localData, id: 'id', parentID: 'pid', text: 'name', hasChildren: 'hasChild', htmlAttributes: 'htmlAttributes' }; 
    public localData: Object[] = [ 
    { id: 1, name: 'Discover Music', hasChild: true, expanded: true, htmlAttributes:{class:"value"} }, 
    { id: 2, pid: 1, name: 'Hot Singles', htmlAttributes:{class:"value1"} }, 
    { id: 3, pid: 1, name: 'Rising Artists' }, 
    { id: 4, pid: 1, name: 'Live Music' }, 
    { id: 7, name: 'Sales and Events', hasChild: true }, 
 
<style> 
    .e-treeview .e-list-item.value > .e-fullrow { 
      background-color: blue; 
    } 
    .e-treeview .e-list-item.value1 > .e-fullrow { 
      background-color: skyblue; 
    } 
</style> 
    ]; 

Refer the below sample link: 
 
Also, Refer the below link for customize the each node Item. 
 
Refer the below link for TreeView component. 
 
 
 
 
Please let us know, if you have any concerns. 
 
 
Regards,  
Sowmiya.P 


Loader.
Up arrow icon