[CLOSED] Treepaneel Node Moves to another treepanel

  1. #1

    [CLOSED] Treepaneel Node Moves to another treepanel



    Hi,

    i have two tree panel. the first tree is binded with database. i have three root node and each have child nodes in first treepanel. Now i want to select the node from first tree to second tree ... i have seen your example "Two Grid concept" first grid is bined with all countries and if we select the country and click the add button the particular record is moved to second grid like wise i need in tree panel... plz send me the code.....

    thanks and regards
  2. #2

    RE: [CLOSED] Treepaneel Node Moves to another treepanel

    Hi,

    Please the following sample (please note that tree has no functionality which allow submit tree on server therefore in the following sample I wrote simple submitting)

    <%@ 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 moveNode(source, destination) {
                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();
                //node.remove();
                destionationRoot.appendChild(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 runat="server">
                        <Items>
                            <ext:ToolbarButton runat="server" Text="Move" Icon="ArrowDown">
                                <Listeners>
                                    <Click Handler="moveNode(#{Tree1}, #{Tree2});" />
                                </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 runat="server">
                        <Items>
                            <ext:ToolbarButton runat="server" Text="Move" Icon="ArrowUp">
                                <Listeners>
                                    <Click Handler="moveNode(#{Tree2}, #{Tree1});" />
                                </Listeners>
                            </ext:ToolbarButton>
                            
                            <ext:ToolbarButton 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>
  3. #3

    RE: [CLOSED] Treepaneel Node Moves to another treepanel

    Hi..
    the code worked. But in my situation i dont want the node to be removed from the source which dragging and dropping on the destination. But the destination node can be remove while drooping on the source.

    Thank you,

    Regards,
    Madan
  4. #4

    RE: [CLOSED] Treepaneel Node Moves to another treepanel

    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>

Similar Threads

  1. How to get Node by id in treepanel 2.0?
    By tms2003@126.com in forum 2.x Help
    Replies: 1
    Last Post: Apr 03, 2012, 3:01 PM
  2. [CLOSED] TreePanel Append node id
    By jesperhp in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Nov 18, 2011, 6:22 AM
  3. Treepanel Node
    By lindgrenm in forum 1.x Help
    Replies: 0
    Last Post: Feb 10, 2010, 3:08 PM
  4. [CLOSED] TreePanel selected node
    By alainfo in forum 1.x Legacy Premium Help
    Replies: 1
    Last Post: Sep 24, 2009, 6:47 AM
  5. TreePanel:Copying from one node to another node using drag and drop
    By eighty20 in forum 1.x Legacy Premium Help
    Replies: 5
    Last Post: Jan 25, 2009, 7:48 AM

Posting Permissions