TreeView not expanding or collapsing

[Martin Holmes]

Hi, we are using v25.2.6 and are having issue with tree view expanding nodes that are more than one level down.

The first expansion of node works fine, once you go another level deep you only get spinner until you collapse and expand parent node. You then cannot close node. I have atatched a screen recording showing the issue.

Attachment: 20240610_124405_9da9d180.zip

[Martin Holmes]

Upon investigation, it appears to be an error when calling syncfusion-blazor-documenteditor.min.js?

[LeoLavanya Dhanaraj]

Hi Martin,

Greetings from Syncfusion support.

Based on your shared video footage, we understand that you are experiencing an issue with the TreeView component with the node expanding/selecting functions. However, we need more details to replicate the issue on our end because we are not integrated the DoumentEditor component inside the TreeView. So, please share the below requested details for further validation of your issue.

1. Whether you have added the DocumentEditor component based on the tree node select/expand events? If yes, share the customization code details on your end?
2. Number of tree nodes(Parent and child level) and type of data source(Self-referential, hierarchal or remote data) rendered on your end?
3. Share the simple issue replicated sample with the replication steps. These details will help us to check and provide a prompt solution.

Regards,

Leo Lavanya Dhanaraj

[Martin Holmes]

Hi, the document editor is used within the project but not within this page.

The number of nodes varies depending on the ODBC query to get the folder structure from the database. The data returned is self referential as it contains the folder name and the full folder path. I then split that down to find folder parent and mark as has children.

I have attached the razor file as is currently.

Thanks, Martin

Attachment: TreeView_a7886ae1.zip

[Dhanush Sekar]

Hi Martin,

Upon reviewing the razor file you supplied, we did not discover any code pertaining to the Document Editor. Could you please provide a simple sample that reproduces the issue? This would assist us in verifying the problem and offering you a solution as soon as possible.

Regards,

Dhanush S

[Martin Holmes]

Hi Dhanush,

I created a simple project using self referential data (attached) and the issue still appears. This project does not include the document editor so the error is on blazor.core.js

Thanks, Martin

Attachment: TreeviewExample_77b475c.zip

[Dhanush Sekar]

Hi Martin,

Currently we are checking this issue with our core team and will update the further details on July 2, 2024.

Regards,

Dhanush S

[Martin Holmes]

Hi, do we have any updates from the core team?

[SureshRajan Alagarsamy]

Hi Martin,

Thanks for your patience.

We have prepared a sample and validated the reported issue. Upon further investigation, we identified that the issue occurs when the selected node (li element) is not present in the DOM, leading to a console error in the expandedNode method. We were able to replicate this issue by forcefully setting the “li” element (the selected node in the TreeView component) to null.

However, apart from this forced scenario, we were unable to replicate the issue during the expand action in the TreeView component. We recommend checking whether the selected node's li element exists in the DOM before the node begin to expand.

We have attached our tested sample for your reference.

Sample : Attached as zip folder.

We strongly suggest reviewing the attached sample. If the issue persists, please provide us with the following details:

1. The complete code snippet of the TreeView component, including the data source if possible.
2. Details of any customizations made in the TreeView component event handlers.
3. A sample replicating the issue, or replicate the issue in the attached sample.

These details will help us to validate the query further and provide you with a prompt solution.

Regards,
Suresh.

Attachment: BlazorTreeView_Tab_5827b67.zip

[Martin Holmes]

Hi SureshRajan,

The example i sent on June 27th is a complete code snippet and data source with no changes to component event handlers which replicates the issue. Load the index page, on the treeview expand Counsel, then expand Brief 14.9.23 and you will see the issue replicated.

I have attached the example again to this reponse for you to investigate.

Thnaks, Martin

Attachment: TreeviewExample_f1be901b.zip

[SureshRajan Alagarsamy]

Hi Martin,

We have validated the shared sample and were able to replicate the reported issue. Upon further investigation, we identified that the issue is caused by the presence of the backslash character "\" in the child node id’s. We need some additional time to validate the issue. We will update you with further details by July 15, 2024.

Regards,
Suresh.

[SureshRajan Alagarsamy]

Hi Martin,

After further validation on our end, we have identified that the child nodes contain a slash(“/”) in the ID value. This causes our source querySelector function to fail to fetch the list element from DOM using the ID value with a slash(“/”), resulting in the console error you encountered.

We recommend excluding the slash character from the ID value to resolve this reported scenario.

Regards,
Suresh.