Category / Section
How can I Undo/Redo the move or delete action in TreeView?
3 mins read
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.
- 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: https://asp.syncfusion.com/demos/web/TreeView/ContextMenu.aspx
- 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>
