PDA

View Full Version : [CLOSED] Validating/Canceling drop event in TreePanel



rmelancon
Apr 29, 2014, 1:08 PM
I am trying to validate a drop of an item from one tree panel to another. Basically I want to limit the number of nodes you can add to a certain tree. Trying to use code from several examples found in the forums. I get a javascript error trying to send the number of children currently in the "drop target" panel. This is the offending line:
<ext2:Parameter Name="nodeCount" Value="#{tpLeftPanel}.getRootNode().childNodes[0].childNodes.length" Mode="Raw" />
Since this is a combination of a couple of examples, I am not sure I am approaching this in the most effective manner.



<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestTree.aspx.vb" Inherits="Adhesion.Web.TestTree" %>

<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">
</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" AppendOnly="true" />
</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" AppendOnly="true" >

</ext2:TreeViewDragDrop>
</Plugins>
<DirectEvents>
<BeforeDrop Delay="0" OnEvent="ValidateLeftDrop" Before="dropFunction.wait = true; o.dropFunction = dropFunction;" Success="if(result.extraParamsResponse.validDrop) { o.dropFunction.processDrop();} else {o.dropFunction.cancelDrop();}" >
<ExtraParams>
<ext2:Parameter Name="nodeCount" Value="#{tpLeftPanel}.getRootNode().childNodes[0].childNodes.length" Mode="Raw" />
</ExtraParams>
</BeforeDrop>
</DirectEvents>
</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>



Public Class TestTree
Inherits System.Web.UI.Page

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

End Class

Daniil
Apr 29, 2014, 5:21 PM
Hi @rmelancon,

I can suggest to use this Parameter.

<ext:Parameter Name="nodeCount" Value="overModel.childNodes.length" Mode="Raw" />

See also:
http://docs-origin.sencha.com/extjs/4.2.1/#!/api/Ext.tree.plugin.TreeViewDragDrop-event-beforedrop

P.S. We appreciate if you post standalone examples:

<%@ Page Language="vb" %>

<script runat="server">
// code behind
</script>

A full standalone example you can look at here:
Forum Guidelines For Posting New Topics (http://forums.ext.net/showthread.php?3440)

rmelancon
Apr 30, 2014, 2:10 PM
You can close this out, thanks.