Node click event triggers after node is selected

[Tim D]

Hello Syncfusion,

I need to detect if a button within the `NodeTempate` has been clicked before the `NodeSelected` events fire. Please see the code below with many omissions for brevity.

<SfTreeView>

    <TreeViewEvents> NodeSelected="nodeselected" NodeClicked="nodeclicked"> </TreeViewEvents>

    <TreeViewTemplates>

        <NodeTemplate>

            <span @onclick:stopPropagation="true">

                <SfButton @onclick="args => buttonclickevent (args, context)"></SfButton>

            </span>

        </NodeTemplate>

    </TreeViewTemplates>

</SfTreeView>

@code{

    void nodeselected(NodeSelectedEventArgs args) {

        // Open an SfSidebar with content related to selected node. Happens 1st.

    }

    void buttonclickevent(MouseEventArgs args, T itemToDelete) {

        // Delete the 'itemToDelete' from the treeview. This happens last.

    }

    void nodeclicked(NodeClickedEventArgs args) {

        // This fires 2nd.

    }

}

The problem I am having is that when I click the button, the `NodeSelected` event fires first before the buttons `onclick` event and stopPropagation doesn't appear to be preventing the `NodeClicked' event.

Is there a way to detect if the button has been clicked before the node has been "selected"?

Many thanks,

Tim

[Shalini Maragathavel]

Hi Tim, 

 

Thanks for contacting Syncfusion support.  

 

Based on your query, we suspect that you need to trigger the button click event first(before triggering the NodeSelected/NodeClicked event). Before proceeding further, please elaborate the purpose of triggering the button’s click event before the NodeSelected/NodeClicked event in detail with a pictorial or video demonstration(if possible). Whether you need to prevent the triggering of NodeSelected event for particular nodes else you want to change the order of events alone in your application? These details would be helpful for us to validate further and provide a prompt solution.  

Regards,
Shalini M. 

[Tim D]

Hello,

You are correct in that I would like to trigger the button click event before triggering the NodeSelected event.  The purpose is to remove the clicked node from the treeview without opening a sidepanel.
I appreciate I could probably just move my NodeSelected event logic into a parent onclick event, like below:

 <TreeViewTemplates>

    <NodeTemplate>

        <span @onclick="@(() => MyOwnNodeSelectedEvent(context))">

            // Other components

            <span @onclick:stopPropagation="true">

                <SfButton @onclick="args => buttonclickevent (args, context)"></SfButton>

            </span>

        </span>

    </NodeTemplate>

</TreeViewTemplates>

@{

    void MyOwnNodeSelectedEvent(T nodeClicked){

        // Move logic from the SfTreeView NodeSelected event into this method

    }

}

If there is a better or more clean way to do this still using the SfTreeView NodeSelected event then please let me know.

Regards,

Tim

[Shalini Maragathavel]

Hi Tim, 

Thanks for the update. 

Based on your query, we understand that you need to trigger the button event before triggering the NodeSelected event. To achieve your requirement, we suggest you to bind the onmousedown event to the button as demonstrated in the code snippet, 

 

  <SfTreeView TValue="TreeData"> 

  <TreeViewTemplates TValue="TreeData"> 

   <NodeTemplate> 

    

<SfButton @onmousedown="@((e) =>buttonclickevent((@context asTreeData).nodeId))">button</SfButton> 

 

   </NodeTemplate> 

</TreeViewTemplates> 

</SfTreeView> 

@code { 

    void buttonclickevent(string id) 

    { 

        // Delete the 'itemToDelete' from the treeview. This happens last. 

 

    } 

} 

 

Please find the below sample for your reference. 

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Treeview-icons536635258-2100215818.zip 

Please get back to us if you need further assistance.

Regards, 

Shalini M. 

[Sneha Bihani]

But what if i want to avoid triggering onselect event if button is clicked

[Sneha Bihani]

Please can you help me . But what if i want to avoid triggering onselect event if button is clicked

[Sneha Bihani]

Hi can you please help me.

[Prasanth Madhaiyan]

Hi Sneha,

To avoid triggering the NodeSelected event when the button inside the tree node is clicked, you can handle the click event of the button and stop the propagation of the event to prevent it from bubbling up to the tree node. By adding @onclick:stopPropagation="true" to the <span> containing the button, the click event of the button won't bubble up to the tree node, thus preventing the NodeSelected event from being triggered when the button is clicked.

Refer to the below code snippets.

[MainLayout.razor]

…

 

<SfTreeView CssClass="main-treeview" @ref="TreeView" ExpandOn="@Expand" TValue="TreeData">

    <TreeViewEvents TValue="TreeData" NodeSelected="nodeselected" NodeClicked="nodeclicked"></TreeViewEvents>

    <TreeViewFieldsSettings Id="nodeId" Text="nodeText" DataSource="treedata" NavigateUrl="navigateUrl" HasChildren="hasChild" ParentID="pid">

    </TreeViewFieldsSettings>

    <TreeViewTemplates TValue="TreeData">

        <NodeTemplate>

            <span>node</span>

            <span @onclick:stopPropagation="true">

                <SfButton @onmousedown="@((e) =>buttonclickevent((@context as TreeData).nodeId))">button</SfButton>

            </span>

        </NodeTemplate>

    </TreeViewTemplates>

</SfTreeView>

…

For your reference, we have attached the sample.

Sample: Attached as a zip file.

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: BlazorTreeView_23a74023.zip

[Sneha Bihani]

As you see above also, and I also tried stoppropagation is not working.

[Prasanth Madhaiyan]

Hi Sneha,

Based on the shared details we can understand that you are trying to utilize Syncfusion TreeView component. We have prepared the sample aligning with your requirements and achieved your requirements by using the build-in onmousedown events. Kindly refer the code changes below.

<span>

    <SfButton CssClass="newbutton" @onmousedown="@((e) =>buttonclickevent((@context as TreeData).Id))">button</SfButton>

</span>

 

void buttonclickevent(string id)

{

    string[] strArray = new string[] { id };

    TreeView.RemoveNodes(strArray);

}

We have attached the sample for your reference,

Sample: Attached as a zip file.

Check out the attached sample and let us know if you need any further assistance.

Regards,

Prasanth Madhaiyan.

Attachment: TreeViewEvents_18869015.zip