How to determine mouse click event details for the TreeView NodeClicked event?

[Tom]

In the NodeClicked event of the SfTree component I'm trying to determine which mouse button was clicked and if it was a single or double click. I assumed that ClickEventArgs.OriginalEvent would have some detailed mouse event info that I could use to get what I needed, however, OriginalEvent is null (see screen shot below). Is there some other way to get the mouse event details that I need? The sample code I've attached is simply the standard Syncfusion TreeView Default Functionalities demo code with a NodeClicked event added.

 

Attachment: SfTreeViewNodeClickIssue_8ca02e59.7z

[Muthukrishnan Kandasamy]

 

Hi Tom, 

 

Thanks for contacting Syncfusion support. 

 

We have validated your requirement in Syncfusion Blazor TreeView component. Based on your provided details, we suspect that your exact requirement is to identify the click and double click event in the TreeView component.  

 

Currently, we have not provided support to get the original event in the NodeClicked event of TreeView. For achieving your requirement, we suggest you to use bind the click and double click event for the parent element of the TreeView. Please refer to the below code block. 

 

    <div class="control_wrapper" @onclick="Click" @ondblclick="DBLClick"> 

        <SfTreeView TValue="TreeItem"> 

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

            <TreeViewEvents TValue="TreeItem" NodeClicked="NodeClicked"></TreeViewEvents> 

        </SfTreeView> 

    </div> 

 

@code{ 

    List<TreeItem> TreeDataSource = new List<TreeItem>(); 

 

    public void Click(MouseEventArgs args) 

    { 

        // perform click event operations 

    } 

 

    public void DBLClick(MouseEventArgs args) 

    { 

        // perform double click event operations 

    } 

 

We have prepared sample for your convenience, the attached sample can be downloaded from the below link. 

 

https://www.syncfusion.com/downloads/support/forum/159452/ze/BlazorApp11758900496 

 

Documentation: https://blazor.syncfusion.com/documentation/treeview/getting-started/ 

 

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

 

Demo: https://blazor.syncfusion.com/demos/treeview/default-functionalities?theme=bootstrap4 

 

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

 

Regards, 

Muthukrishnan K 

[Casey Pries]

As seems to be the usual you have to work around the lack of basic functionality of these controls.  Unfortunately when using the onclick event I'm not getting any right clicks and the event is firing after NodeClicked so it's useless for me.  I use onmousedown instead and the code posted below.  

A person brought this up 4 years ago and it's still not implemented.  Also the node click events don't pass along the selected object so you have to do a lot of work arounds just to make that work.  There is so much inconsistency with your controls it's frustrating.

       public enum MouseButton

       {

           None,

           Left,

           Right

       }

   private void HandleMouseDown(MouseEventArgs args)

   {

       if (args.Button == 2)

       {

           MouseButtonClicked = MouseButton.Right;

       }

       else if (args.Button == 0)

       {

           MouseButtonClicked = MouseButton.Left;

       }

   }

<div id="treeViewContainer" class="product-category-treeview" @onmousedown="HandleMouseDown">

    <SfTreeView @ref="@ProductCategoryTree" TValue="ProductCategory" AllowMultiSelection="false" AllowTextWrap="false" AllowDragAndDrop="false" >

        <TreeViewFieldsSettings TValue="ProductCategory" Id="Id" DataSource="@MyProductCategories" Text="Name" Child="Children"></TreeViewFieldsSettings>

        <TreeViewEvents TValue="ProductCategory" NodeClicked="ProductCategoryClickedHandler"></TreeViewEvents>

        <SfContextMenu TValue="MenuItem" @ref="ProductCategoryTreeContextMenu" Target="#treeViewContainer" Items="@ProductCategoriesContextMenuItems">

            <MenuEvents TValue="MenuItem" OnOpen="@ProductCategoryContextMenuOpening" ItemSelected="ProductCategoryContextMenuItemSelected"></MenuEvents>

        </SfContextMenu>

        <TreeViewTemplates TValue="ProductCategory">

            <NodeTemplate>

                @{

                    <div>

                        <span>@context.Name</span>

                    </div>

                }

            </NodeTemplate>

        </TreeViewTemplates>

    </SfTreeView>

</div>

[Prasanth Madhaiyan]

Hi Casey,

Based on the shared details, we understand that you want to select TreeView nodes when performing a right-click on the node. To achieve this requirement, you can utilize the TreeView component's SelectedNodes property. In the sample below, we have updated the SelectedNodes property inside the TreeView component's NodeClicked event based on the clicked node item ID.

Refer to the below code snippets.

[Index.razor]

@using Syncfusion.Blazor.Navigations

 

<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

{

    …

    public string[] selectedNodes = Array.Empty<string>();

    // Triggers when TreeView node is clicked

    public void nodeClicked(NodeClickEventArgs args)

    {

        …

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

    }

 

    …

}

 

For your reference, we have attached the sample.

Sample: Attached as a zip file.

Please review the attached sample. If there is any misunderstanding regarding your specific requirements for the TreeView component, could you please provide more detailed information? Once we have a clear understanding, we will promptly investigate and offer a solution. We look forward to hearing from you with the requested details.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorTreeViewSample_959b2dcc.zip