[CLOSED] Drag and drop from tree panel to tree panel.

  1. #1

    [CLOSED] Drag and drop from tree panel to tree panel.

    Hi Team,

    I have added a listener*to the Treeview to check what data is being dragged from one tree to another. When I drag a folder from one tree to another, then I need the list of all the leaf nodes within that folder. And I want to capture this within the listener function. How can I get that.

    <%@ Page Language="C#" %>
    
    <%@ Import Namespace="System.Collections.Generic" %>
    
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!X.IsAjaxRequest)
            {
                SiteMapNode siteNode = SiteMap.RootNode;
                Node node = this.CreateNodeWithOutChildren(siteNode);
                node.AllowDrag = true;
                node.Expanded = true;
                TreePanel1.Root.Add(node);
            }
        }
    
        //page tree node loader handler
        protected void LoadPages(object sender, NodeLoadEventArgs e)
        {
            if (!string.IsNullOrEmpty(e.NodeID))
            {
                SiteMapNode siteMapNode = SiteMap.Provider.FindSiteMapNodeFromKey(e.NodeID);
                
                if (siteMapNode == null)
                {
                    return;
                }
    
                SiteMapNodeCollection children = siteMapNode.ChildNodes;
    
                if (children != null && children.Count > 0)
                {
                    foreach (SiteMapNode mapNode in siteMapNode.ChildNodes)
                    {
                        e.Nodes.Add(this.CreateNodeWithOutChildren(mapNode));
                    }
                }
            }
        }
    
        //dynamic node creation
        private Node CreateNodeWithOutChildren(SiteMapNode siteMapNode)
        {
            Node treeNode;
    
            if (siteMapNode.ChildNodes != null && siteMapNode.ChildNodes.Count > 0)
            {
                treeNode = new Node();
            }
            else
            {
                treeNode = new Ext.Net.Node();
                treeNode.Leaf = true;
            }
    
            treeNode.NodeID = siteMapNode.Key;
            treeNode.Text = siteMapNode.Title;
            treeNode.Qtip = siteMapNode.Description;
    
            return treeNode;
        }
    </script>
    
    <!DOCTYPE html>
    
    <html>
    <head id="Head1" runat="server">
        <title>Drag and Drop betweens two TreePanels - Ext.NET Examples</title>
        <link href="/resources/css/examples.css" rel="stylesheet" />
        <style>
            .tree {
               float  : left;
               margin : 20px;
               border : 1px solid #c3daf9;
            }
        </style>
        
        <script>
            var beforerecorddrop = function (node, data, overModel, dropPosition, dropFn) {
                debugger;
    
                var draggeditem = data.item.innerText;
                var folderDraggedTo = overModel.data.text;
                var depth = overModel.data.depth;
                var parentFolder;                
            };
        </script>
    
    </head>
    <body>
        <form id="Form1" runat="server">
            <ext:ResourceManager ID="ResourceManager1" runat="server" />
            
            <h1>Drag and Drop betweens two TreePanels</h1>
            
            <p>The TreePanels have a TreeSorter applied in "folderSort" mode.</p>
            
            <p>Both TreePanels are in "appendOnly" drop mode since they are sorted.</p>
            
            <p>Drag along the edge of the tree to trigger auto scrolling while performing a drag and drop.</p>
    
            <p>The data for this tree is asynchronously loaded with a TreeStore.</p>
            
            <div class="tree">
                <ext:TreePanel 
                    ID="TreePanel1"
                    runat="server" 
                    Border="false"
                    Height="300"
                    Width="250"
                    UseArrows="true"
                    Animate="true">
                    <Store>
                        <ext:TreeStore ID="TreeStore1" 
                            runat="server" 
                            OnReadData="LoadPages"
                            FolderSort="true">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Sorters>
                                <ext:DataSorter Property="text" />
                            </Sorters>
                        </ext:TreeStore>
                    </Store>                
                    <View>
                        <ext:TreeView ID="TreeView1" runat="server">
                           <Plugins>
                                <ext:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server" AppendOnly="true" />
                            </Plugins>
                        </ext:TreeView>
                    </View>
                </ext:TreePanel>
            </div>
            
            <div class="tree">
                <ext:TreePanel 
                    ID="TreePanel2"
                    runat="server" 
                    Height="300"
                    Width="250"
                    Border="false"
                    UseArrows="true"
                    AutoScroll="true">
                        
                    <Store>
                        <ext:TreeStore ID="TreeStore2" 
                            runat="server" 
                            OnReadData="LoadPages" 
                            FolderSort="true">
                            <Proxy>
                                <ext:PageProxy />
                            </Proxy>
                            <Sorters>
                                <ext:DataSorter Property="text" />
                            </Sorters>
                        </ext:TreeStore>
                    </Store>
                    <View>
                        <ext:TreeView ID="TreeView2" runat="server">
                           <Plugins>
                                <ext:TreeViewDragDrop ID="TreeViewDragDrop2" runat="server" AppendOnly="true" />
                            </Plugins>
                            <Listeners>
                                <BeforeDrop Fn="beforerecorddrop" />
                            </Listeners>
                        </ext:TreeView>
                    </View>
                        
                    <Root>
                        <ext:Node Text="My Files" Icon="Folder" Expanded="true" />
                    </Root>
                </ext:TreePanel>
            </div>
        </form>
    </body>
    </html>
    Last edited by Daniil; Jan 12, 2016 at 3:34 PM. Reason: [CLOSED]
  2. #2
    Hello @Prasoon!

    On your beforerecorddrop function, get the dropped record with data.records[0] (and data.records[0].data.text shall be the name of the dropped node).

    If dropping more than one records at once, you will have data.records[1] and so on.

    And from the recod, you can get its list of child nodes. Each child node will also have its child nodes and so on. So, to get the first child of the first dragged node:
    data.records[0].childNodes[0]

    To know if that child node above is a folder or a leaf, check
    data.records[0].childNodes[0].childnodes.length

    If 0, then it is a leaf. Otherwise, it has some sub-nodes.

    I believe that, from this you can build the logic you need.
    Fabrício Murta
    Developer & Support Expert

Similar Threads

  1. [CLOSED] Tree panel: having column model with tree store
    By Prasoon in forum 2.x Premium Help
    Replies: 2
    Last Post: Dec 17, 2015, 4:47 AM
  2. [CLOSED] custom tree drag & drop
    By susanz in forum 2.x Premium Help
    Replies: 2
    Last Post: Oct 29, 2014, 5:05 PM
  3. Replies: 1
    Last Post: May 08, 2013, 12:54 AM
  4. [CLOSED] drag and drop in tree panels question
    By bogc in forum 1.x Premium Help
    Replies: 1
    Last Post: Aug 31, 2011, 7:43 PM
  5. Replies: 13
    Last Post: Jul 14, 2011, 1:45 PM

Tags for this Thread

Posting Permissions