PDA

View Full Version : [CLOSED] TreePanel drag and drop, BeforeDrop event determining where dropped node originates



rmelancon
Apr 30, 2014, 3:01 PM
So I have three panels and you can drag and drop nodes between trees. There is a limit on one of the tree panels to only allow three nodes to be added. However this also limits you from dragging the nodes to reorder within that panel once you have added the limit of nodes in the second panel (3 nodes). You can't reorder because the BeforeDrop handler cancels the drop. So is there a way to know whether I am dropping a node that is already in my tree as opposed to a node being dropped from a different tree so that I know not to canel the drop? I tried looking at node.parent but at the point of the drop it is already in "my" tree.



<%@ Page Language="vb" %>
<script runat="server">

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
Dim root As Ext.Net.Node = tpAvailablePanels.Root.Primary
For i As Integer = 1 To 6
root.Children.Add(Me.CreateNodeWithOutChildren(i))
Next
Dim nodes = root.Children
End Sub
Private Function CreateNodeWithOutChildren(i As Integer) As Node
Dim treeNode As Node

treeNode = New Ext.Net.Node()
With treeNode
.Leaf = True
.NodeID = i
.Text = "Node" + i.ToString
Select Case i
Case 1
.Icon = Icon.Add
Case 2
.Icon = Icon.ApplicationOsxError
Case 3
.Icon = Icon.BrickAdd
Case 4
.Icon = Icon.BulletWrenchRed
Case 5
.Icon = Icon.ComputerGo
Case 6
.Icon = Icon.GroupGo
End Select
End With

Return treeNode
End Function

Protected Sub ValidateLeftDrop(sender As Object, e As DirectEventArgs)
Dim count As Integer = e.ExtraParams("nodeCount")
e.ExtraParamsResponse.Add(New With {.validDrop = count <= 3})
End Sub
Protected Sub LoadPages(sender As Object, e As NodeLoadEventArgs)
' will load treepanels from database
End Sub

</script>

<style type="text/css">
.tree {
float : left;
margin : 20px;
border : 1px solid #c3daf9;
}
</style>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>DragDrop</title>
<script type="text/javascript">
function testit(node, data, overModel, dropPosition, dropHandlers) {
var panel = <%= tpLeftPanel.ClientID%>;
var x = panel.getRootNode().childNodes.length;
//debugger;
if (x > 2)
dropHandlers.cancelDrop();
else
dropHandlers.processDrop();
}

</script>
</head>
<body>

<ext2:ResourceManager ID="ResourceManager" runat="server" />

<div class="tree">
<ext2:TreePanel
ID="tpAvailablePanels"
runat="server"
Border="false"
Height="300"
Width="250"
UseArrows="true"
Animate="true">
<Store>
<ext2:TreeStore id="StoreAvaliablePanels"
runat="server"
OnReadData="LoadPages"
FolderSort="true">
<Sorters>
<ext2:DataSorter Property="text" />
</Sorters>
</ext2:TreeStore>
</Store>
<View>
<ext2:TreeView ID="TreeView1" runat="server">
<Plugins>
<ext2:TreeViewDragDrop ID="TreeViewDragDrop1" runat="server" />
</Plugins>
</ext2:TreeView>
</View>
<Root>
<ext2:Node Text="Available Panels" Icon="Folder" Expanded="true" />
</Root>
</ext2:TreePanel>
</div>

<div class="tree">
<ext2:TreePanel
ID="tpLeftPanel"
runat="server"
Height="300"
Width="250"
Border="false"
UseArrows="true"
AutoScroll="true">
<Store>
<ext2:TreeStore ID="StoreLeftPanel"
runat="server"
OnReadData="LoadPages"
FolderSort="true">
<Sorters>
<ext2:DataSorter Property="text" />
</Sorters>
</ext2:TreeStore>
</Store>
<View>
<ext2:TreeView ID="TreeView2" runat="server">
<Plugins>
<ext2:TreeViewDragDrop ID="TreeViewDragDrop2" runat="server" >

</ext2:TreeViewDragDrop>
</Plugins>
<Listeners>
<BeforeDrop Fn="testit"></BeforeDrop>
</Listeners>
</ext2:TreeView>
</View>
<Root>
<ext2:Node Text="Left Panel" Icon="Folder" Expanded="true" />
</Root>

</ext2:TreePanel>
</div>

<div class="tree">
<ext2:TreePanel
ID="tpRightPanel"
runat="server"
Height="300"
Width="250"
Border="false"
UseArrows="true"
AutoScroll="true">

<Store>
<ext2:TreeStore ID="StoreRightPanel"
runat="server"
OnReadData="LoadPages"
FolderSort="true">
<Sorters>
<ext2:DataSorter Property="text" />
</Sorters>
</ext2:TreeStore>
</Store>
<View>
<ext2:TreeView ID="TreeView3" runat="server">
<Plugins>
<ext2:TreeViewDragDrop ID="TreeViewDragDrop3" runat="server" AppendOnly="true" />
</Plugins>
</ext2:TreeView>
</View>
<Root>
<ext2:Node Text="Right Pane" Icon="Folder" Expanded="true" />
</Root>
</ext2:TreePanel>
</div>

</body>
</html>

Daniil
Apr 30, 2014, 8:47 PM
Hi @rmelancon,

You can use this:

data.view.panel.id

rmelancon
May 01, 2014, 2:27 PM
That works, thank you.