Articles in this section
Category / Section

How to implement user prompt whenever the TreeView node is moved or deleted?

2 mins read

Description

When TreeView is enabled with drag and drop or defined to remove nodes, using prompts you can confirm deletion or moving nodes. This prevents you from unintentional dragging or deleting nodes on mishandling.

Solution

You can implement user prompt when a node is dragged and deleted using the following steps.

  1. In the following scenario, deletion is performed using ContextMenu. It defines delete action for TreeView nodes when you click the Delete menu item. Using ClientSideOnClick event of ContextMenu, you can delete the TreeView node using removeNode() API in the client script. Before calling the API, display a prompt message to confirm deletion.

Sample: https://asp.syncfusion.com/demos/web/TreeView/ContextMenu.aspx

  1. Enable drag and drop for the TreeView node, by setting AllowDragAndDrop, AllowDropChild, AllowDropSibling and AllowDragAndDropAcrossControl properties to true. To generate prompt for drag and drop confirmation, define client side script, when drag starts using ClientSideOnNodeDragStarted event. Now, it displays a prompt message to confirm moving node and returns true or false as per your confirmation.

Sample: https://asp.syncfusion.com/demos/web/TreeView/DragandDrop.aspx

Refer to the following code example.

ASPX

<asp:ScriptManager runat="server"></asp:ScriptManager>
<!-- ContextMenu for deleting TreeView nodes on Menu click event -->
<ej:Menu ID="Menu1" MenuType="ContextMenu" OpenOnClick="false" ClientSideOnClick="remove" runat="server" ContextMenuTargetID="treeview">
    <Items>
        <ej:MenuItem Text="Delete"></ej:MenuItem>
    </Items>
</ej:Menu>
<div>
    <!-- TreeView with Drag and drop enabled and DragStart event defined for confirming drag action-->
    <ej:TreeView ID="treeview" runat="server" Height="300px" Width="400px" AllowDragAndDrop="true" ClientSideOnNodeDragStarted="prompt" AllowDropChild="true" AllowDropSibling="true" AllowDragAndDropAcrossControl="true">
        <Nodes>
            <ej:TreeViewNode Id="artwork1" Expanded="True" Text="Artwork">
                <Nodes>
                    <ej:TreeViewNode Id="abstract1" Text="Abstract">
                        <Nodes>
                            <ej:TreeViewNode Id="abs1" Text="2 Acrylic Mediums"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="abs2" Text="Creative Acrylic"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="abs3" Text="Modern Painting"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="abs4" Text="Canvas Art"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="abs5" Text="Black white"></ej:TreeViewNode>
                        </Nodes>
                    </ej:TreeViewNode>
                    <ej:TreeViewNode Id="ch" Text="Children">
                        <Nodes>
                            <ej:TreeViewNode Id="ch1" Text="Preschool Crafts"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="ch2" Text="School-age Crafts"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="ch3" Text="Fabulous Toddler"></ej:TreeViewNode>
                        </Nodes>
                    </ej:TreeViewNode>
                    <ej:TreeViewNode Id="comic" Text="Comic / Cartoon">
                        <Nodes>
                            <ej:TreeViewNode Id="comic1" Text="Batman"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="comic2" Text="Adventures of Superman"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="comic3" Text="Super boy"></ej:TreeViewNode>
                        </Nodes>
                    </ej:TreeViewNode>
                </Nodes>
            </ej:TreeViewNode>
            <ej:TreeViewNode Id="books" Expanded="True" Text="Books">
                <Nodes>
                    <ej:TreeViewNode Id="co" Text="Comics">
                        <Nodes>
                            <ej:TreeViewNode Id="co1" Text="The Flash"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="co2" Text="Human Target"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="co3" Text="Birds of Prey"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="co4" Text="Canvas Art"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="co5" Text="Black white"></ej:TreeViewNode>
                        </Nodes>
                    </ej:TreeViewNode>
                    <ej:TreeViewNode Id="entertain" Text="Entertaining"></ej:TreeViewNode>
                    <ej:TreeViewNode Id="design" Text="Design"></ej:TreeViewNode>
                </Nodes>
            </ej:TreeViewNode>
            <ej:TreeViewNode Id="music" Text="Music">
                <Nodes>
                    <ej:TreeViewNode Id="classical" Text="Classical">
                        <Nodes>
                            <ej:TreeViewNode Id="cl1" Text="Avant-Garde"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="cl2" Text="Medieval"></ej:TreeViewNode>
                            <ej:TreeViewNode Id="cl3" Text="Orchestral"></ej:TreeViewNode>
                        </Nodes>
                    </ej:TreeViewNode>
                    <ej:TreeViewNode Id="mass" Text="Mass"></ej:TreeViewNode>
                    <ej:TreeViewNode Id="folk" Text="Folk"></ej:TreeViewNode>
                </Nodes>
            </ej:TreeViewNode>
        </Nodes>
    </ej:TreeView>
</div>
<script type="text/javascript">
    //ClientSideOnNodeDragStart event - prompt message to display when drag starts to confirm whether node can be dragged and dropped
    function prompt() {
        if (confirm('Are you sure want to drag this node') == true) {
            return true;
        }
        else {
            return false;
        }
    }
    var treeobj;
    //ClientSideOnClick event of ContextMenu- that prompts message to confirm deletion of TreeView Node
    function remove() {
        if (confirm("Are you want to delete this node!") == true) {
            treeobj = $("#treeview").data("ejTreeView");
            treeobj.removeNode(treeobj.getSelectedNode());
        }
        else {
            return true;
        }
    }
</script>

 

Did you find this information helpful?
Yes
No
Help us improve this page
Please provide feedback or comments
Comments (0)
Please sign in to leave a comment
Access denied
Access denied