We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. (Last updated on: November 16, 2018).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

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

Platform: ASP.NET Web Forms |
Control: TreeView |
Published Date: August 26, 2014 |
Last Revised Date: May 8, 2019
Tags: treeview

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: http://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: http://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>

 

2X faster development

The ultimate ASP.NET Web Forms UI toolkit to boost your development speed.
ADD COMMENT
You must log in to leave a comment

Please sign in to access our KB

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon