Add separator between items

[Bulmaro R]

I'm using https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=material3 and i would like to add a separator between items, Can you help me with this?

Thanks in advance

[LeoLavanya Dhanaraj]

Hi Bulmaro,

Greetings from Syncfusion support.

We would like to let you know that we don’t have a support for the mentioned separator in the TreeView component. However, you can meet this need by customizing the TreeView component using the CSSClass property. In the example below, we have added the `border-bottom` style to the `.e-fullrow` class in the TreeView component. Refer to the code snippets and sample provided below.

Sample : https://blazorplayground.syncfusion.com/VDhJDFXCRhovYVmW

<SfTreeView TValue="TreeItem" CssClass="custom_tree">

    <TreeViewFieldsSettings DataSource="@TreeDataSource" Id="NodeId" Text="NodeText" Expanded="Expanded" Child="@("Child")"></TreeViewFieldsSettings>

</SfTreeView>

 

.custom_tree .e-fullrow{

    border-bottom: 1px solid black;

}

Output screenshot:

Also, check out the below link for the Blazor TreeView customization.

https://blazor.syncfusion.com/documentation/treeview/styles

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

Refer the shared details and get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

[Bulmaro R]

I need to put a separator beteween a specific point as a group separator :

[LeoLavanya Dhanaraj]

As mentioned earlier, you can override the TreeView styles with the proper CSS selectors. Based on your need, we have included the styles in the below sample.

Sample : https://blazorplayground.syncfusion.com/hNLpjbXrVxRzttOP

Code snippets:

.custom_tree .e-level-1,.custom_tree .e-level-2{

        border: 1px solid #ccc;

        border-radius: 5px;

}

Output screenshot: