How to unselect a node

[Luca]

I can't seem to find a way to unselect a single node using the blazor treeview.

In my use case I need to allow only a single selected node, so I can't use the AllowMultiSelection property.
I would like to have the node deselect when a user clicks on the previously selected node.

I've tried to use the NodeClicked event to set the select property of the node contained in the eventcallback parameter to false, but that doesn't change anything.

  

void onSingleNodeClicked(NodeClickEventArgs e)

    {

        if(e.NodeData.Selected)

        {

            //Both of these seem to do thing

            tree.GetNode(e.NodeData.Name).Selected = false;

            e.NodeData.Selected = false;

        }

    }

Could you help me? Thank you.

[Sowmiya Padmanaban]

Hi  Luca,  

 

Greetings from Syncfusion support. 

 

Based on your shared details, we suspect that your requirement is to deselect a tree node, when a user clicks on the previously selected node. 

 

You can achieve your requirement by using selectedNodes property on nodeClicked event. Refer the below code snippet. 

 

@using Syncfusion.Blazor.Navigations 

<SfTreeView TValue="MailItem" @bind-SelectedNodes="selectedNodes"> 

    <TreeViewFieldsSettings TValue="MailItem" Id="Id" DataSource="@MyFolder" Text="FolderName" ParentID="ParentId" HasChildren="HasSubFolders" Expanded="Expanded"></TreeViewFieldsSettings> 

    <TreeViewEvents TValue="MailItem" NodeSelecting="nodeSelect" NodeClicked="nodeclick"></TreeViewEvents> 

</SfTreeView> 

@code{ 

public string[] selectedNodes { get; set; } 

    public bool bool_variable { get; set; } 

  public void nodeSelect(Syncfusion.Blazor.Navigations.NodeSelectEventArgs args) 

    { 

        if(!args.NodeData.Selected) 

        { 

            this.bool_variable = false; 

        } 

    } 

    public void nodeclick(Syncfusion.Blazor.Navigations.NodeClickEventArgs args) 

    { 

        // Check the node is already in a selected state or not. 

        if(args.NodeData.Selected && this.bool_variable) 

        { 

            // if yes, clear the selection using selectednodes property. 

            selectedNodes = new string[] { " " }; 

        } 

        else 

        { 

            this.bool_variable = true; 

        } 

    } 

} 

 

Refer the sample link below. 

 

https://www.syncfusion.com/downloads/support/forum/159250/ze/TreeView1740509797.zip 

 

Refer to the below link to know more about the TreeView component. 

 

UG Documentation-https://blazor.syncfusion.com/documentation/treeview/data-binding/?no-cache=1#remote-data 

 

Demo link-https://blazor.syncfusion.com/demos/treeview/default-functionalities/ 

 

API Reference- https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.SfTreeView-1.html 

 

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

 

Regards,  

Sowmiya.P