color node on its property value

[Alessandro Degola]

hi,

I need to change background and color of nodes based on node property.

How can I do?

regards

alessandro

[Keerthana Rajendran]

Hi Alessandro, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in TreeView component. As per your request, we have added classes and applied styles for specific nodes in TreeView to customize background and color of nodes. We have used the HtmlAttributes property to create custom class for certain nodes 

  

Please check the below code snippet.  

 

@using Syncfusion.Blazor.Navigations 

<SfTreeView TValue="MailItem"> 

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" HtmlAttributes="HtmlAttributes" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 

</SfTreeView> 

 

<style> 

    .e-custom .e-list-text { 

        color: #ff0000; 

    } 

 

    .e-list-item .e-custom .e-fullrow { 

        background: #e06b8645; 

    } 

 

    .e-custom.e-hover > .e-text-content .e-list-text { 

        color: #ff0000; 

    } 

</style> 

@code{ 

    protected override void OnInitialized() 

    { 

        base.OnInitialized(); 

        .  .    .  . 

        MyFolder.Add(new MailItem 

        { 

            Id = "3", 

            ParentId = "2", 

            FolderName = "Primary", 

            HtmlAttributes= new Dictionary<string, object>() 

            { 

            {"class", "e-custom e-tree-class" } 

            } 

        }); 

        MyFolder.Add(new MailItem 

        { 

            Id = "4", 

            ParentId = "2", 

            FolderName = "Social", 

            HtmlAttributes = new Dictionary<string, object>() 

            { 

            {"class", "e-custom e-tree-class" } 

            } 

        }); 

    } 

} 

 

Please check the sample demonstrating the solution from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/172592/ze/TreeViewColor-1086835726 

 

You can also add custom CSS class for the TreeView component and customize the TreeView based on your requirement. 

 

https://blazor.syncfusion.com/documentation/treeview/how-to/customize-the-tree-nodes-based-on-levels 

 

Similar to the attached sample, you can perform CSS style customization by specifying particular class name for required nodes based on your scenario.   

  

Please let us know if you need any further assistance. 

 

Regards, 

Keerthana R. 

[Alessandro Degola]

hi, it’s ok for me!

regards

alessandro

[Keerthana Rajendran]

 

Hi Alessandro, 

 

Thanks for the update. We are happy to hear that the provided solution helped you. Please get back to us if you need any further assistance. 

 

Regards, 

Keerthana R.