[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.
Code:
<%@ 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>
