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 can I Undo/Redo the move or delete action in TreeView?

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

Description

TreeView with enabled drag and drop allows you to move the nodes anywhere within the TreeView. To prevent the unintentional moving or removing nodes, you can Undo/Redo them.

Solution

The following scenario undoes the deleted or moved node from TreeView using a button click event.

  1. Create a TreeView with enabled drag and drop. TreeView node deletion is implemented using ContextMenu, under ClientSideOnClick event. Delete the TreeView node using removeNode() API in the client script and store the node value and its parent ID to retrieve it back to same position on undo. Similarly store the value of node and its parent id under ClientSideOnNodeDragStarted() event. Refer the following sample link to create Treeview with context menu.

 

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

 

  1. Define a Button for performing undo action and restore the nodes back to its position using appendChild() to the TreeView object, based on its parent ID. Now right-click on TreeView node and delete it or drag the nodes within the TreeView. Click on the undo button that restores the previous actions accordingly. Refer the following code example.

HTML

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <link href="Content/ej/default-theme/ej.theme.min.css" rel="stylesheet" />
    <link href="Content/ej/ej.widgets.core.min.css" rel="stylesheet" />
    <script src="Scripts/jquery-1.10.2.min.js"></script>
    <script src="Scripts/jquery.globalize.min.js"></script>
    <script src="Scripts/jquery.easing-1.3.min.js"></script>
    <script src="Scripts/ej.web.all.js"></script>
    <title></title>
    <script type="text/javascript">
        //ClientSideOnNodeDragStart event - prompt message to display when drag starts in Tree node that calls a function to store the node details
        function prompt() {
            if (confirm('Are you sure want to drag this node') == true) {
                ondragstrats();
                return true;
            }
            else {
                return false;
            }
        }
       //Variables to store node details and its parent node  id
        var selected_node, parentid;
       //ClientSideOnClick event of ContextMenu- that prompts message to confirm deletion and stores the node details
        function remove() {
            if (confirm("Are you want to delete this node!") == true) {
                treeobj = $("#treeview").data("ejTreeView");
                selected_node = treeobj.getSelectedNode();
                parentid = $(selected_node).parents("li:eq(0)");
                treeobj.removeNode(treeobj.getSelectedNode());
            }
            else {
                return true;
            }
        }
        //Function to store the node object and its parent id 
        function ondragstrats() {
            treeobj = $("#treeview").data("ejTreeView");
            selected_node = treeobj.getSelectedNode();
            parentid = $(selected_node).parents("li:eq(0)");
        }
       //ClientSideOnClick event of Button – that performs undoing of the dragged node and deleted node
        function undo() {
            $('#treeview').find('a').removeClass('e-active');
            var dragged_parentid = parentid[0].id;
            var ul = document.getElementById(dragged_parentid);
            ul.appendChild(selected_node[0]);
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <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 -->
            <ej:TreeView ID="treeview" runat="server" Height="300px" Width="400px" AllowDragAndDrop="true" AllowEditing="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>
            <!-- Button for performing Undo action -->
        <ej:Button ID="btn_undo" runat="server" Type="Button" Text="Undo" ClientSideOnClick="undo"></ej:Button>
    </form>
</body>
</html>

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