Select Treeview node on mouse right click

[Balaji]

Hi,

I need to select treeview node on mouse right click.

I am aware that on right click we can display context menu. But need to select that node on mouse right click and then can show contextmenu.

I need this without javascript.

[LeoLavanya Dhanaraj]

Hi Balaji,

Greetings from Syncfusion support.

Based on the information provided, it appears that you wish to select TreeView nodes by right-clicking on them. To accomplish this, you can make use of the SelectedNodes property of the TreeView component. We have provided a TreeView sample that addresses your requirement (selecting a treeview node on right-click and showing a context menu). In this sample, we have updated the SelectedNodes property within the NodeClicked event of the TreeView component, based on the ID of the clicked node item, and displayed the context menu for the selected node.

Check out the below code snippets and sample for your reference.

[Index.razor]

<div id="treeview" @onmousedown="HandleMouseDown">

    <SfTreeView TValue="EmployeeData" @ref="tree" AllowDragAndDrop="true" @bind-SelectedNodes="@selectedNodes" @bind-ExpandedNodes="expandedNodes">

        <TreeViewFieldsSettings Id="Id" ParentID="Pid" DataSource="@ListData" Text="Name" HasChildren="HasChild"></TreeViewFieldsSettings>

        <TreeViewEvents TValue="EmployeeData" NodeSelected="OnSelect" NodeClicked="nodeClicked"></TreeViewEvents>

 

        <SfContextMenu TValue="MenuItem" @ref="menu" Target="#treeview" Items="@MenuItems">

            <MenuEvents TValue="MenuItem" ItemSelected="MenuSelect"></MenuEvents>

        </SfContextMenu>

    </SfTreeView>

</div>

 

@code

{

    private MouseButton MouseButtonClicked;

    private void HandleMouseDown(MouseEventArgs args)

    {

        if (args.Button == 2)

 

        {

            MouseButtonClicked = MouseButton.Right;

        }

        else if (args.Button == 0)

        {

            MouseButtonClicked = MouseButton.Left;

        }

    }

    // Reference for treeview

    SfTreeView<EmployeeData> tree;

 

    // Triggers when TreeView Node is selected

    public void OnSelect(NodeSelectEventArgs args)

    {

        this.selectedId = args.NodeData.Id;

    }

 

    // Triggers when TreeView node is clicked

    public void nodeClicked(NodeClickEventArgs args)

    {

        selectedId = args.NodeData.Id;

        selectedNodes = new string[] { args.NodeData.Id };

    }

}

Please get back to us if you need any further assistance.

Regards,

Leo Lavanya Dhanaraj

Attachment: BlazorTreeViewSample_3a5a7696.zip

[Balaji]

Hi Lavanya,

Thanks for the replay it is working as expected.

But I have one doubt what is the difference between "NodeClicked" and "NodeSelected" Events?

Clicking on node make it node selected? but what is main difference?

As per syncfusion documentation,

The Blazor TreeView component’s NodeClicked event is triggered when a TreeView node is successfully clicked.

The Blazor TreeView component NodeSelected event is triggered when the TreeView node is selected/unselected successfully.  

Here there is no exact differentiation.. for both e the events, could you please clarify?

[LeoLavanya Dhanaraj]

	NodeClicked	NodeSelected
Definition	This event is triggered when a node in the TreeView is clicked.	This event is triggered when a node in the TreeView is selected (either by clicking on it or using keyboard navigation).
Order of event trigger	When clicking on the tree node, the NodeClicked event is first triggered, and it is a native click event.	The NodeSelected event is triggered after the nodeClicked event is triggered for its corresponding node click.
Arguments	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeClickEventArgs.html It provides information about the Event, Left & Top value, Name NodeData details.	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.NodeSelectEventArgs.html Provides information about the action(whether select/unselect), option to cancel the event, whether it is interacted or not, Name and NodeData.
API	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeClicked	https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Navigations.TreeViewEvents-1.html#Syncfusion_Blazor_Navigations_TreeViewEvents_1_NodeSelected

[Balaji]

Thanks for the info.

Got the clarity on it.