How to remove hoverable background color

[KINS]

I have used treeview in my blazor web application.I would like to know below points

1. how to remove hoverable background color

2.how to change level background color 

3.how to add small icon in node

for your reference ,pls check attached file

https://www.screencast.com/t/dhymFCvEi

[Shalini Maragathavel]

Hi KINS, 

Greetings from Syncfusion support.

Query# 1. how to remove hoverable background color

Based on your query, we could understand that you need to remove the background while hovering the TreeView node. You can achieve your requirement by setting the background color property as unset as demonstrated in the below code snippet, 

<SfSidebar Target=".main-content" @ref="Sidebar> 

  <ChildContent> 

    <SfTreeView CssClass="main-treeview" @ref="TreeView" TValue="TreeData">
                            . . . 

      </SfTreeView> 

  </ChildContent></SfSidebar>

<style> 

 

    .main-treeview .e-list-item.e-hover > .e-fullrow { 

        background-color: unset; 

    } 

 

    .main-treeview .e-list-item.e-hover > .e-text-content .e-list-text, .main-treeview .e-list-item.e-hover > .e-text-content { 

        color: white; 

    } 

</style> 

 

Query#2.how to change level background color 

You can change the background color based on the TreeView levels by applying the below css, 

<SfSidebar Target=".main-content" @ref="Sidebar> 

  <ChildContent> 

    <SfTreeView CssClass="main-treeview" @ref="TreeView" TValue="TreeData">
                            . . . 

      </SfTreeView> 

  </ChildContent></SfSidebar>

<style>  

    .main-treeview .e-level-1 > .e-text-content { 

        background-color: #800a7d; 

    } 

 

    .main-treeview .e-level-2 > .e-text-content { 

        background-color: #ab544e; 

    } 

</style> 

 

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

Query#3:how to add small icon in node

Based on your query, we suspect that you need to render small icons in the TreeView nodes. You can achieve your requirement by setting the required font-size to the TreeView node icons as demonstrated in the below code snippet, 

 

<SfSidebar Target=".main-content" @ref="Sidebar> 

  <ChildContent> 

    <SfTreeView CssClass="main-treeview" @ref="TreeView" TValue="TreeData">
                            . . . 

      </SfTreeView> 

  </ChildContent></SfSidebar>
<style> 

   

.sidebar-treeview .main-treeview .icon-circle-thin::before { 

        content: '\e808'; 

        font-size: 10px; 

    } 

    .sidebar-treeview .main-treeview .icon-circle-thin1::before { 

        content: '\e812'; 

        font-size: 10px; 

    } 

    .sidebar-treeview .main-treeview .icon-circle-thin2::before { 

        content: '\e811'; 

        font-size: 10px; 

    } 

</style> 

 

Please find the below sample for your reference. 

  

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/SIDEBA~1154977643.zip

Please check the below link for details on our icons library for various icons. 

 

Icons: https://blazor.syncfusion.com/documentation/appearance/icons/ 

                 

 Please get back to us if you need any further assistance.  

 
Regards,  

Shalini M.