Hi,
Here is updated version
<%@ Page Language="C#" %>
<%@ Import Namespace="System.Collections.Generic"%>
<%@ Import Namespace="System.Xml"%>
<%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Coolite Toolkit Example</title>
<script runat="server">
public class Node
{
public string Id
{
get; set;
}
public string Text
{
get;
set;
}
public List<Node> Children
{
get; set;
}
}
protected void SaveTree(object sender, AjaxEventArgs e)
{
string strTree = e.ExtraParams["tree"];
List<Node> nodes = JSON.Deserialize<List<Node>>(strTree);
}
</script>
<script type="text/javascript">
function clone(node) {
var atts = node.attributes;
atts.id = Ext.id();
var clonedNode = new Ext.tree.TreeNode(Ext.apply({}, atts));
clonedNode.text = node.text;
for (var i = 0; i < node.childNodes.length; i++) {
clonedNode.appendChild(clone(node.childNodes[i]));
}
return clonedNode;
}
function moveNode(source, destination, copy) {
var node = source.getSelectionModel().getSelectedNode();
if (Ext.isEmpty(node)) {
Ext.Msg.alert("Error", "The source tree has no selected node");
return;
}
var destionationRoot = destination.getRootNode();
destionationRoot.appendChild(copy ? clone(node) : node);
}
var getJsonTree = function(node) {
var str = '[';
for (var i = 0; i < node.childNodes.length; i++) {
str = str + '{ "Id": "' + node.childNodes[i].id + '"';
str = str + ', "Text": "' + node.attributes.text + '"';
if (node.childNodes[i].isLeaf() == false) {
str = str + ', "Children": ' + getJsonTree(node.childNodes[i]);
}
str = str + '}';
if (i < (node.childNodes.length - 1)) {
str = str + ',';
}
}
str = str + ']';
return str;
}
</script>
</head>
<body>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />
<ext:TreePanel ID="Tree1" runat="server" Width="200" Height="300" Title="Tree1" RootVisible="false">
<TopBar>
<ext:Toolbar ID="Toolbar1" runat="server">
<Items>
<ext:ToolbarButton ID="ToolbarButton1" runat="server" Text="Move" Icon="ArrowDown">
<Listeners>
<Click Handler="moveNode(#{Tree1}, #{Tree2}, true);" />
</Listeners>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode NodeID="Root">
<Nodes>
<ext:TreeNode NodeID="1" Text="Node1"></ext:TreeNode>
<ext:TreeNode NodeID="2" Text="Node2"></ext:TreeNode>
<ext:TreeNode NodeID="3" Text="Node3"></ext:TreeNode>
<ext:TreeNode NodeID="4" Text="Node4"></ext:TreeNode>
<ext:TreeNode NodeID="5" Text="Node5">
<Nodes>
<ext:TreeNode NodeID="5_1" Text="Node5_1"></ext:TreeNode>
<ext:TreeNode NodeID="5_2" Text="Node5_2"></ext:TreeNode>
<ext:TreeNode NodeID="5_3" Text="Node5_3"></ext:TreeNode>
<ext:TreeNode NodeID="5_4" Text="Node5_4"></ext:TreeNode>
<ext:TreeNode NodeID="5_5" Text="Node5_5"></ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Nodes>
</ext:TreeNode>
</Root>
</ext:TreePanel>
<br />
<ext:TreePanel ID="Tree2" runat="server" Width="200" Height="300" Title="Tree2" RootVisible="false">
<TopBar>
<ext:Toolbar ID="Toolbar2" runat="server">
<Items>
<ext:ToolbarButton ID="ToolbarButton2" runat="server" Text="Move" Icon="ArrowUp">
<Listeners>
<Click Handler="moveNode(#{Tree2}, #{Tree1}, false);" />
</Listeners>
</ext:ToolbarButton>
<ext:ToolbarButton ID="ToolbarButton3" runat="server" Text="Save">
<AjaxEvents>
<Click OnEvent="SaveTree">
<ExtraParams>
<ext:Parameter Name="tree" Value="getJsonTree(#{Tree2}.getRootNode())" Mode="Raw" />
</ExtraParams>
</Click>
</AjaxEvents>
</ext:ToolbarButton>
</Items>
</ext:Toolbar>
</TopBar>
<Root>
<ext:TreeNode NodeID="Root">
</ext:TreeNode>
</Root>
</ext:TreePanel>
</form>
</body>
</html>