1. Home
  2. Forum
  3. Blazor
  4. TreeView not expanding or collapsing

TreeView not expanding or collapsing

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


11 Replies
MH Martin Holmes June 10, 2024 12:42 PM UTC

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

Screenshot 2024-06-10 133917.png


LD LeoLavanya Dhanaraj Syncfusion Team June 17, 2024 12:12 PM UTC

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


MH Martin Holmes June 18, 2024 07:21 PM UTC

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


DS Dhanush Sekar Syncfusion Team June 20, 2024 04:37 PM UTC

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


MH Martin Holmes June 27, 2024 11:45 AM UTC

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

DS Dhanush Sekar Syncfusion Team June 28, 2024 02:35 PM UTC

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


MH Martin Holmes replied to Dhanush Sekar July 8, 2024 05:10 PM UTC

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


SA SureshRajan Alagarsamy Syncfusion Team July 10, 2024 03:54 PM UTC

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

MH Martin Holmes July 10, 2024 04:22 PM UTC

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

SA SureshRajan Alagarsamy Syncfusion Team July 11, 2024 05:31 PM UTC

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.


SA SureshRajan Alagarsamy Syncfusion Team July 15, 2024 01:26 PM UTC

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.


Loader.
Up arrow icon