What's New?

TreePanel:Copying from one node to another node using drag and drop

Hybrid View

Previous Post Previous Post   Next Post Next Post
  1. #1
    Jan 22, 2009, 12:44 PM

    TreePanel:Copying from one node to another node using drag and drop

    Hi Coolite Team,

    We are working on a application in which we will be using TreePanel which will be created dynamically in code behind. We want to use Drag and Drop feature to copy data from one node to another node and update the changes back to the server . We will appreciate if you can provide a working sample for the same.


    Thanks & Regards
    Craig,
  2. #2
    Jan 22, 2009, 2:07 PM

    RE: TreePanel:Copying from one node to another node using drag and drop

    Hi Craig,

    Can you clarify? What you mean 'copy data' ?


    Do you want copy some information (which one?) from one node (drop node) to another (target node)? Or clone drop node and append clone to the target node (append to target node children)?




  3. #3
    Jan 22, 2009, 10:35 PM

    RE: TreePanel:Copying from one node to another node using drag and drop

    Hi ,

    Thank you for your reply. It should do two things by providing options like do you want to move or copy
    1) Move the dragged node onto the dropped(target) node.
    2)Clone the dragged node and append it to dropped(target) node.

    but it should have a constraint like the hierarchy needs to be maintained. like example

    I have Parent Dept nodes and each dept contains employees. I can only drag employees to another dept. like the same way the tree will be having multiple levels.


    Thanks & Regards
    Craig

  4. #4
    Jan 23, 2009, 4:57 AM

    RE: TreePanel:Copying from one node to another node using drag and drop

    Hi Craig,

    I wrote small sample which shows how to move node and copy (copy if ctrl key pressed)
    <%@ Page Language="C#" %>
<%@ 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="Head2" runat="server">
    <title></title>
    
    <script runat="server">
        protected void NodeDrop(object sender, AjaxEventArgs e)
        {
            string targetID = e.ExtraParams["TargetID"];
            string dropedID = e.ExtraParams["DropedID"];
            bool isCopy = Convert.ToBoolean(e.ExtraParams["isCopy"]);
            
            string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID, "<br/>IsCopy = ", isCopy);
            
            ScriptManager1.AddScript("Ext.Msg.alert('Response from server', {0});", JSON.Serialize(msg));
        }
    </script>
    <script type="text/javascript">
        function beforeDrop(dropEvent) {
            //if with ctrl key then copy else move
            if (dropEvent.rawEvent.ctrlKey) {
                dropEvent.dropNode = new Ext.tree.TreeNode(dropEvent.dropNode.attributes);
            }
            return true;
        }

        function dragOver(dragOverEvent) {
            // we don't want 'above' or 'below' operations which mean insert
            //also you can perform additional checks with dragOverEvent.target and dragOverEvent.dropNode
            return dragOverEvent.point == 'append';
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />          
         
        <ext:TreePanel runat="server" Width="300" Height="400" RootVisible="false" EnableDD="true">
            <Root>
                <ext:TreeNode Text="Root">
                    <Nodes>
                        <ext:TreeNode Text="1" NodeID="ID1"></ext:TreeNode>
                        <ext:TreeNode Text="2" NodeID="ID2"></ext:TreeNode>
                        <ext:TreeNode Text="3" NodeID="ID3"></ext:TreeNode>
                        <ext:TreeNode Text="4" NodeID="ID4"></ext:TreeNode>
                        <ext:TreeNode Text="5" NodeID="ID5"></ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Listeners>
                <BeforeNodeDrop Fn="beforeDrop" />
                <NodeDragOver Fn="dragOver" />
            </Listeners>
            <AjaxEvents>
                <NodeDrop OnEvent="NodeDrop">
                    <ExtraParams>
                        <ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
                        <ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />
                        <ext:Parameter Name="isCopy" Value="dropEvent.rawEvent.ctrlKey" Mode="Raw" />
                    </ExtraParams>
                </NodeDrop>
            </AjaxEvents>
        </ext:TreePanel>                                                         
    </form>
</body>
</html>
    Hope this help

  5. #5
    Jan 24, 2009, 2:20 AM

    RE: TreePanel:Copying from one node to another node using drag and drop

    Hi,

    Thank you for your reply. The sample is working for client side .but when it is raising the AJAXEvent it is showing an error 'dropEvent' is undefined. you are sending the dropEvent properties as parameters for AJAXEvent NodeDrop but It is not present.Kindly fix this issue.


    And also It would be very helpful If you can make the sample such a way that it meets the following sample conditions.

    Just think A company has multiple departments . the company is the root node. each department will be having employees.

    Moving : only employees can be moved from one department to another .
    Copying: When I copy a department to another department all the employees from the department needs to be copied to the other department and not the department itself. and an employee can be copied to another department. This is just a fictious sample and this is a typical tree functionality .

    I will appreciate your support in making this sample work.

    Thanks &amp; Regards
    Craig
  6. #6
    Jan 25, 2009, 7:48 AM

    RE: TreePanel:Copying from one node to another node using drag and drop

    Hi Graig,

    About error... You need update from the SVN or use params[0] instead 'dropEvent' in ExtraParams.

    I modified example according your requirments. Now employees can be copy/move to another departments (copy mode with ctrl key). Departments can't be moved but it can be copied (all employees will be copied from one department to another)

    Please see the following example:
    <%@ Page Language="C#" %>
<%@ 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="Head2" runat="server">
    <title></title>
    
    <script runat="server">
        protected void NodeDrop(object sender, AjaxEventArgs e)
        {
            string targetID = e.ExtraParams["TargetID"];
            string dropedID = e.ExtraParams["DropedID"];
            bool isCopy = Convert.ToBoolean(e.ExtraParams["isCopy"]);
            
            string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID, "<br/>IsCopy = ", isCopy);
            
            ScriptManager1.AddScript("Ext.Msg.alert('Response from server', {0});", JSON.Serialize(msg));
        }

        protected void DepartmentCopy(object sender, AjaxEventArgs e)
        {
            string targetID = e.ExtraParams["TargetID"];
            string dropedID = e.ExtraParams["DropedID"];
            
            string msg = string.Concat("Target = ", targetID, "<br/>Droped = ",dropedID);
            
            ScriptManager1.AddScript("Ext.Msg.alert('Departments copy', {0});", JSON.Serialize(msg));
        }
    </script>
    
    <script type="text/javascript">
        //this function clone node with children
        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 beforeDrop(dropEvent) {
            //if with ctrl key then copy else move
            if (dropEvent.rawEvent.ctrlKey) {
                var isDepartment = dropEvent.dropNode.attributes.IsDepartment;
                var isEmployee = dropEvent.dropNode.attributes.IsEmployee;

                if (isDepartment) {

                    //copy employees to the another department
                    for (var i = 0; i < dropEvent.dropNode.childNodes.length; i++) {
                        dropEvent.target.appendChild(clone(dropEvent.dropNode.childNodes[i]));
                    }

                    dropEvent.cancel = true;
                    dropEvent.dropStatus = true;                    
                }
                else if (isEmployee) {
                    dropEvent.dropNode = clone(dropEvent.dropNode);
                }
                else {
                    dropEvent.cancel = true;
                }
            }
            return true;
        }

        function isDepartmentCopy(dropEvent) {
            var result = dropEvent.rawEvent.ctrlKey &amp;&amp; dropEvent.dropNode.attributes.IsDepartment &amp;&amp; dropEvent.target.attributes.IsDepartment;
            return result || false;
        }

        function dragOver(dragOverEvent) {            
            // we don't want 'above' or 'below' operations which mean insert
            //also you can perform additional checks with dragOverEvent.target and dragOverEvent.dropNode
            if(dragOverEvent.point !== 'append') {
                return false;
            }

            var isEmployee = dragOverEvent.dropNode.attributes.IsEmployee;
            var toDepartment = dragOverEvent.target.attributes.IsDepartment;

            if (!dragOverEvent.rawEvent.ctrlKey) {               

                //can move only employee
                if (!isEmployee) {
                    return false;
                }

                //can move to the department only
                if (!toDepartment) {
                    return false;
                }
            }
            else {
                //copy

                //can copy only to department
                if (isEmployee &amp;&amp; !toDepartment) {
                    return false;
                }

                var isDepartment = dragOverEvent.dropNode.attributes.IsDepartment;
                //department can copy to department only
                if (isDepartment &amp;&amp; !toDepartment) {
                    return false;
                }
            }

            return true;
        }
    </script>
</head>
<body>
    <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Debug" />          
         
        <ext:TreePanel ID="TreePanel1" runat="server" Width="300" Height="400" RootVisible="false" EnableDD="true">
            <Root>
                <ext:TreeNode Text="Company">
                    <Nodes>
                        <ext:TreeNode Text="Department1" NodeID="D1">
                            <Nodes>
                                <ext:TreeNode Text="D1-Employee1" NodeID="D1E1">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D1-Employee2" NodeID="D1E2">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D1-Employee3" NodeID="D1E3">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D1-Employee4" NodeID="D1E4">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D1-Employee5" NodeID="D1E5">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                            </Nodes>
                            <CustomAttributes>
                                <ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
                            </CustomAttributes>
                        </ext:TreeNode>
                        <ext:TreeNode Text="Department2" NodeID="D2">
                            <Nodes>
                                <ext:TreeNode Text="D2-Employee1" NodeID="D2E1">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D2-Employee2" NodeID="D2E2">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D2-Employee3" NodeID="D2E3">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D2-Employee4" NodeID="D2E4">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D2-Employee5" NodeID="D2E5">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                            </Nodes>
                            <CustomAttributes>
                                <ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
                            </CustomAttributes>
                        </ext:TreeNode>
                        <ext:TreeNode Text="Department3" NodeID="D3">
                            <Nodes>
                                <ext:TreeNode Text="D3-Employee1" NodeID="D3E1">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D3-Employee2" NodeID="D3E2">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D3-Employee3" NodeID="D3E3">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D3-Employee4" NodeID="D3E4">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                                <ext:TreeNode Text="D3-Employee5" NodeID="D3E5">
                                    <CustomAttributes>
                                        <ext:ConfigItem Name="IsEmployee" Value="true" Mode="Raw" />
                                    </CustomAttributes>
                                </ext:TreeNode>
                            </Nodes>
                            <CustomAttributes>
                                <ext:ConfigItem Name="IsDepartment" Value="true" Mode="Raw" />
                            </CustomAttributes>
                        </ext:TreeNode>
                    </Nodes>
                </ext:TreeNode>
            </Root>
            <Listeners>
                <BeforeNodeDrop Fn="beforeDrop" />
                <NodeDragOver Fn="dragOver" />
            </Listeners>
            <AjaxEvents>
                <BeforeNodeDrop OnEvent="DepartmentCopy" Before="return isDepartmentCopy(dropEvent);">
                    <ExtraParams>
                        <ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
                        <ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />                        
                    </ExtraParams>
                </BeforeNodeDrop>
                <NodeDrop OnEvent="NodeDrop">
                    <ExtraParams>
                        <ext:Parameter Name="TargetID" Value="dropEvent.target.id" Mode="Raw" />
                        <ext:Parameter Name="DropedID" Value="dropEvent.dropNode.id" Mode="Raw" />
                        <ext:Parameter Name="isCopy" Value="dropEvent.rawEvent.ctrlKey" Mode="Raw" />
                    </ExtraParams>
                </NodeDrop>
            </AjaxEvents>
        </ext:TreePanel>                                                         
    </form>
</body>
</html>

Similar Threads

  1. [CLOSED] Raising ItemMove when reordering a node into not loaded node
    By RCN in forum 2.x Legacy Premium Help
    Replies: 8
    Last Post: Jun 20, 2012, 6:48 PM
  2. [CLOSED] [1.0] Drag Drop on TreePanel - Get reference to Target node
    By danielg in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Dec 14, 2011, 11:29 AM
  3. [CLOSED] Find Parent Node and Reassign node to founded Parent Node in Tree view
    By speedstepmem4 in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Jul 19, 2011, 3:53 AM
  4. TreePanel - Drag and drop node if condition
    By Kaido in forum 1.x Help
    Replies: 0
    Last Post: Jul 14, 2009, 7:25 AM

Posting Permissions