Treeview NavigateUrl- from 176025

[Sarah]

Hi,

I used the following link in the treeview and considering that I used NodeClicked to open the corresponding page and I used NodeSelecting according to the link, it no longer works properly.

https://blazor.syncfusion.com/documentation/treeview/how-to/accordion-tree

2- How can I implement the following image?

blazor web app .net 8

[Prasanth Madhaiyan]

Hi Sarah,

Based on the details you shared, we understand that you want to display second-level parent nodes with expand and collapse icons, along with their children, in the 'Customize TreeView as Accordion' sample on your end. To achieve this, the > combinator ensures the rule applies only to direct children of .e-list-item.e-level-1 and not to descendant elements. This ensures that only .e-icons directly under .e-level-1 are hidden, leaving the .e-level-2 elements unaffected.

Refer to the below code snippets.

[Home.razor]

…

<style>

…

    /*To hide the expand and collapse icon*/

    .accordiontree .e-list-item.e-level-1 > .e-text-content > .e-icons.e-icon-collapsible,

    .accordiontree .e-list-item.e-level-1 > .e-text-content > .e-icons.e-icon-expandable {

        display: none;

    }

…

</style>

…

For your reference, we have attached the sample.

Sample: As a zip file.

In the documentation, we have customized the TreeView component to display as an accordion. However, based on your use case, you can customize it on your end. Please review the shared details and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDotNet8Sample_ca0023e.zip

[Sarah]

Hi

Thanks for your reply. Clicking on the items does not work properly.

Attachment: ScreenHunter_05_e35f0890.rar

[Prasanth Madhaiyan]

Hi Sarah,

Based on the details you've shared, we would like to inform you that we have customized the TreeView component to implement accordion functionality, as described in the documentation below. We also shared these details in our previous update. In this sample, we used the NodeSelecting event and called the TreeView component's CollapseAll method, which collapses all expanded nodes upon selection. However, if you want to prevent this from happening, you can remove the NodeSelecting event from your sample.

For your reference, we have attached the sample and documentation.

Sample: Attached as a zip file.

Documentation: https://blazor.syncfusion.com/documentation/treeview/how-to/accordion-tree

Check out the shared details, sample, and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDotNet8Sample_3fcd459e.zip

[Sarah]

Hi,

Thanks for your response.

1-Now there is no accordion mode.

2-As I said in the past, please guide me on how to implement the image below.

[Prasanth Madhaiyan]

Hi Sarah,

Based on the details shared, we would like to inform you that we have used custom styles for the Blazor TreeView items to demonstrate similar functionality to the Accordion in the documentation. However, to display the expand/collapse icons during the selection for the TreeView component's parent node, you can use the following styles for the corresponding elements.

Refer to the below code snippets.

[Home.razor]

…

<style>

    ...

    /*To show the expand and collapse icon during selection*/

    .accordiontree.e-treeview .e-list-item.e-active > .e-text-content .e-icon-collapsible, .accordiontree.e-treeview .e-list-item.e-active > .e-text-content .e-icon-expandable {

        color: #6c757d;

    }

    ...

</style>

…

For your reference, we have attached the sample and screenshot.

Sample: Attached as a zip file.

Screenshot:

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorDotNet8Sample_cada97fb.zip