Selection changes when opening dialog

[Luca]

Hi,

I'm trying to use the TreeView control but I'm facing an issue when the user clicks on an outside button to open a modal dialog.

The idea would be to select a single item from the tree, and show a modal dialog with some data by pressing a specific button. 

The problem is that when clicking on the button after having selected an item in the tree, the selected item changes by itself.

I've created a sample project to share where I can reproduce the issue.

Steps:

1) Open the project and compile

2) Run it, in the index page there's a treeview with some mockup data.

3) Click for example on the bottom item.

4) Click on the button above the treeview to open the dialog.

If the issue occurs, you will see the selection being switched when the dialog opens.
This does not happen 100% of the time, so please try it multiple times by selecting different items and re-opening the dialog.

Please find attached a video of the issue and the source code of the example.
Thank you for your support.

Attachment: treeview_selection_bug_with_video_8200a435.zip

[Sowmiya Padmanaban]

Hi Luca,  

 

Greetings from Syncfusion support. 

 

We have checked your reported problem with TreeView component (Selection is not maintained on TreeView component). To resolve your problem, we suggest you to use the NodeSelecting event of TreeView component, to enable the button component in your application (Or any other operations based on your requirement).  

 

NodeSelecting event will trigger on selection of TreeView nodes. 

 

Please, refer the below code snippet. 

 

<SfTreeView TValue="TreeItem" SortOrder="Syncfusion.Blazor.Navigations.SortOrder.Ascending" @ref="tree"> 

    <TreeViewEvents TValue="TreeItem" NodeSelecting="onNodeSelected">TreeViewEvents> 

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

    <TreeViewTemplates TValue="TreeItem"> 

        <NodeTemplate> 

            @{ 

                var item = ((context as TreeItem)); 

                <div> 

                    <span>@item.NodeTextspan> 

                    <span>[@item.Status]span> 

                    @if (item.AssignedTo == null) 

                    { 

                        <span class="pl-5">Nessun utente associatospan> 

                    } 

                    else 

                    { 

                        <span class="pl-5">@item.AssignedTo.Usernamespan> 

                    } 

 

                div> 

            } 

        NodeTemplate> 

    TreeViewTemplates> 

SfTreeView> 

    void onNodeSelected(Syncfusion.Blazor.Navigations.NodeSelectEventArgs args) 

    { 

        this.btnDisable = false; 

    } 

 

Please, refer the modified sample. 

 

https://www.syncfusion.com/downloads/support/forum/159543/ze/treeview_selection_bug-258481689.zip 

 

If you the above suggested solution do not meet your requirement then please share us the exact scenario your requirement. This information would help us to provide you the prompt solution. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P

[Luca]

Thank you. The solution proposed by you seems to resolve the problem I was having. I'm really curious why though, as I was not changing anything, just reading an array value, but still, now it works.

Thank you very much!

[Sowmiya Padmanaban]

Hi Luca,  

 

Thanks for the update. 

 

We are happy to hear that your problem has been resolved. In your shared application, you have used SelectedNodesChanged event for TreeView component. It causes your reported problem and we are currently validating to find the cause of your reported problem in TreeView component. If it is bug in component, we will include the fix for this issue in any of our upcoming releases. 

 

We suggest you to use the NodeSelecting event to fulfill your requirement. 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P