This is a migrated thread and some comments may be shown as answers.

Drag And Drop Destimation Node

7 Answers 114 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Colin Mulcahy
Top achievements
Rank 1
Colin Mulcahy asked on 23 Oct 2008, 04:41 PM
Hi,

Just a quick one.

I've have a treeview that is a hierarchial view for a categories table.

I've successfully (big party!) implemented a complete ajax solution for editing db records with one exception:

Using EnableDragAndDropBetweenNodes set to true the destination node on server side is returning an existing child node of the destination node and not the destination node itself. Yet on the page it is performing as expected.

If I do a refresh, the moved node is now a child of the child of the destination node.

Could this be to do with RadTreeViewDropPosition?

Even if the visual line appears between nodes that in fact I could be hoverring on one of the child nodes instead and it is returning that node in code behind..?

What would be a good way to make sure that the drag and drop between nodes is in fact between nodes and that the destinationnode is the correct one?

Thanks for any help.

Colin

PS. I'm suing the default skins if that makes a difference.

7 Answers, 1 is accepted

Sort by
0
Yana
Telerik team
answered on 24 Oct 2008, 02:44 PM
Hello Colin,

I am not able to reproduce the described issue, please check the attached test project. Download it and give it a try. What is different in your case?

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Colin Mulcahy
Top achievements
Rank 1
answered on 27 Oct 2008, 10:25 PM
Hi Yana,

Thank you for your reply.

In order to provide you with a sample which display the behaviour I briefly described in my first post I have taken the code you provided (which is the same in my on application) and added code to highlight the behaviour. Copy the following code and run. Follow the instructions on the page to repeat behaviour when page is run.

Thanks Colin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TreeView.aspx.vb" Inherits=".TreeView" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Treeview Drag and Drop Sample</title> 
    <style type="text/css">  
        .DetailTableText  
        {  
            border: 1px solid #626262;  
            font-family: Tahoma;  
            font-size: 12px;  
        }  
        .DetailTableHeader  
        {  
            font-family: Tahoma;  
            font-weight: bold;  
            font-size: 12px;  
            border-bottom: 1px solid #626262;  
            padding: 4px;  
            background-color: #EBE9ED;  
        }  
        .DetailTableCell  
        {  
            border: 1px solid #626262;  
        }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <div> 
        <asp:ScriptManager runat="server" ID="ScriptManager1" /> 
        <table cellpadding="0" cellspacing="0">  
            <tr> 
                <td> 
                    <table cellpadding="0" cellspacing="10">  
                        <tr valign="top">  
                            <td class="DetailTableCell" width="250">  
                                <div class="DetailTableHeader">  
                                    Source</div> 
                                <telerik:RadTreeView ID="trvSource" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="true" /> 
                            </td> 
                            <td class="DetailTableCell">  
                                <div class="DetailTableHeader">  
                                    Results</div> 
                                <asp:TextBox ID="txtResults" Width="400" TextMode="MultiLine" Rows="20" runat="server"></asp:TextBox> 
                            </td> 
                        </tr> 
                        <tr valign="top">  
                            <td width="250">  
                                <asp:Button ID="cmdReset" runat="server" Text="Reset" /> 
                            </td> 
                            <td> 
                            </td> 
                        </tr> 
                    </table> 
                </td> 
            </tr> 
            <tr valign="top">  
                <td class="DetailTableText">  
                    <div class="DetailTableHeader">  
                        Details to Reproduce Behaviour</div> 
                    <div style="padding: 5px;">  
                        <b>Drag Over</b> 
                        <ol> 
                            <li>Drag Category8 over Category2 and release.<br /> 
                                This will produce the results as expected with th correct destNode value of 2.</li> 
                            <li>Drag Category9 over Category2 and release.<br /> 
                                This will produce the results as expected with th correct destNode value of 2.</li> 
                        </ol> 
                        <b>Drag and insert Above or Below</b> 
                        <ol> 
                            <li>Drag Category10 and place between category8 and category9. Although it places the node in the<br /> 
                                expected position in the tree on category2 node, the returned value from destnode is a childnode<br /> 
                                value of 8 or 9 depending how is dropped between nodes category8 and category9. <b>This is incorrect!</b></li>  
                        </ol> 
                        <b>Conclusion</b> 
                        <p> 
                            Based on my expectation of how drag and drop should work I can confirm the following results:</p> 
                        <ol> 
                            <li><b>Drag Over</b> works as expected and returns correct destination node values.</li> 
                            <li><b>Drag below</b> and <b>above</b> return incorrect destination node values.<br /> 
                                The value that is returned is the value of a child node of the node that the node is dropped on.</li> 
                        </ol> 
                    </div> 
                </td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html> 
 

Code behind:

#Region "Imports"  
 
Imports Telerik.Web.UI
#End Region  
 
Partial Public Class TreeView  
    Inherits System.Web.UI.Page  
 
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
 
        If Not Page.IsPostBack Then 
            LoadData()  
        End If 
 
    End Sub 
 
    Protected Sub cmdReset_Click(ByVal sender As ObjectByVal e As EventArgs) Handles cmdReset.Click  
 
        LoadData()  
        txtResults.Text = String.Empty  
 
    End Sub 
 
    Private Sub LoadData()  
 
        trvSource.Nodes.Clear()  
        Dim rootNode As New RadTreeNode("Root""-1")  
        trvSource.Nodes.Add(rootNode)  
        For index As Integer = 1 To 10  
            rootNode.Nodes.Add(New RadTreeNode("Category " & index.ToString(), index.ToString))  
        Next 
        rootNode.AllowDrag = False 
        trvSource.ExpandAllNodes()  
 
    End Sub 
 
    Protected Sub trvSource_NodeDrop(ByVal sender As ObjectByVal e As RadTreeNodeDragDropEventArgs) Handles trvSource.NodeDrop  
 
        Dim sourceNode As RadTreeNode = e.SourceDragNode  
        Dim destNode As RadTreeNode = e.DestDragNode  
        Dim dropPosition As RadTreeViewDropPosition = e.DropPosition  
 
        If destNode IsNot Nothing Then 
            If sourceNode.TreeView.SelectedNodes.Count <= 1 Then 
                PerformDragAndDrop(dropPosition, sourceNode, destNode)  
            ElseIf sourceNode.TreeView.SelectedNodes.Count > 1 Then 
                For Each node As RadTreeNode In sourceNode.TreeView.SelectedNodes  
                    PerformDragAndDrop(dropPosition, node, destNode)  
                Next 
            End If 
            destNode.Expanded = True 
            sourceNode.TreeView.ClearSelectedNodes()  
        End If 
 
    End Sub 
 
    Private Sub PerformDragAndDrop(ByVal dropPosition As RadTreeViewDropPosition, ByVal sourceNode As RadTreeNode, ByVal destNode As RadTreeNode)  
        Select Case dropPosition  
            Case RadTreeViewDropPosition.Over  
                ' child  
                If Not sourceNode.IsAncestorOf(destNode) Then 
                    sourceNode.Owner.Nodes.Remove(sourceNode)  
                    destNode.Nodes.Add(sourceNode)  
                End If 
            Case RadTreeViewDropPosition.Above  
                ' sibling - above  
                sourceNode.Owner.Nodes.Remove(sourceNode)  
                destNode.InsertBefore(sourceNode)  
            Case RadTreeViewDropPosition.Below  
                ' sibling - below  
                sourceNode.Owner.Nodes.Remove(sourceNode)  
                destNode.InsertAfter(sourceNode)  
        End Select 
 
        Dim Result As String 
 
        Result = String.Format("DestNode: {0} Value: {1} Position: {2}", destNode.Text, destNode.Value, dropPosition.ToString) & vbCrLf  
        txtResults.Text += Result  
 
    End Sub 
 
End Class 
0
Colin Mulcahy
Top achievements
Rank 1
answered on 27 Oct 2008, 10:25 PM
Hi Yana,

Thank you for your reply.

In order to provide you with a sample which display the behaviour I briefly described in my first post I have taken the code you provided (which is the same in my on application) and added code to highlight the behaviour. Copy the following code and run. Follow the instructions on the page to repeat behaviour when page is run.

Thanks Colin

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TreeView.aspx.vb" Inherits=".TreeView" %> 
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %> 
<html xmlns="http://www.w3.org/1999/xhtml">  
<head runat="server">  
    <title>Treeview Drag and Drop Sample</title> 
    <style type="text/css">  
        .DetailTableText  
        {  
            border: 1px solid #626262;  
            font-family: Tahoma;  
            font-size: 12px;  
        }  
        .DetailTableHeader  
        {  
            font-family: Tahoma;  
            font-weight: bold;  
            font-size: 12px;  
            border-bottom: 1px solid #626262;  
            padding: 4px;  
            background-color: #EBE9ED;  
        }  
        .DetailTableCell  
        {  
            border: 1px solid #626262;  
        }  
    </style> 
</head> 
<body> 
    <form id="form1" runat="server">  
    <div> 
        <asp:ScriptManager runat="server" ID="ScriptManager1" /> 
        <table cellpadding="0" cellspacing="0">  
            <tr> 
                <td> 
                    <table cellpadding="0" cellspacing="10">  
                        <tr valign="top">  
                            <td class="DetailTableCell" width="250">  
                                <div class="DetailTableHeader">  
                                    Source</div> 
                                <telerik:RadTreeView ID="trvSource" runat="server" EnableDragAndDrop="True" EnableDragAndDropBetweenNodes="true" /> 
                            </td> 
                            <td class="DetailTableCell">  
                                <div class="DetailTableHeader">  
                                    Results</div> 
                                <asp:TextBox ID="txtResults" Width="400" TextMode="MultiLine" Rows="20" runat="server"></asp:TextBox> 
                            </td> 
                        </tr> 
                        <tr valign="top">  
                            <td width="250">  
                                <asp:Button ID="cmdReset" runat="server" Text="Reset" /> 
                            </td> 
                            <td> 
                            </td> 
                        </tr> 
                    </table> 
                </td> 
            </tr> 
            <tr valign="top">  
                <td class="DetailTableText">  
                    <div class="DetailTableHeader">  
                        Details to Reproduce Behaviour</div> 
                    <div style="padding: 5px;">  
                        <b>Drag Over</b> 
                        <ol> 
                            <li>Drag Category8 over Category2 and release.<br /> 
                                This will produce the results as expected with th correct destNode value of 2.</li> 
                            <li>Drag Category9 over Category2 and release.<br /> 
                                This will produce the results as expected with th correct destNode value of 2.</li> 
                        </ol> 
                        <b>Drag and insert Above or Below</b> 
                        <ol> 
                            <li>Drag Category10 and place between category8 and category9. Although it places the node in the<br /> 
                                expected position in the tree on category2 node, the returned value from destnode is a childnode<br /> 
                                value of 8 or 9 depending how is dropped between nodes category8 and category9. <b>This is incorrect!</b></li>  
                        </ol> 
                        <b>Conclusion</b> 
                        <p> 
                            Based on my expectation of how drag and drop should work I can confirm the following results:</p> 
                        <ol> 
                            <li><b>Drag Over</b> works as expected and returns correct destination node values.</li> 
                            <li><b>Drag below</b> and <b>above</b> return incorrect destination node values.<br /> 
                                The value that is returned is the value of a child node of the node that the node is dropped on.</li> 
                        </ol> 
                    </div> 
                </td> 
            </tr> 
        </table> 
    </div> 
    </form> 
</body> 
</html> 
 

Code behind:

#Region "Imports"  
 
Imports Telerik.Web.UI
#End Region  
 
Partial Public Class TreeView  
    Inherits System.Web.UI.Page  
 
    Protected Sub Page_Load(ByVal sender As ObjectByVal e As System.EventArgs) Handles Me.Load  
 
        If Not Page.IsPostBack Then 
            LoadData()  
        End If 
 
    End Sub 
 
    Protected Sub cmdReset_Click(ByVal sender As ObjectByVal e As EventArgs) Handles cmdReset.Click  
 
        LoadData()  
        txtResults.Text = String.Empty  
 
    End Sub 
 
    Private Sub LoadData()  
 
        trvSource.Nodes.Clear()  
        Dim rootNode As New RadTreeNode("Root""-1")  
        trvSource.Nodes.Add(rootNode)  
        For index As Integer = 1 To 10  
            rootNode.Nodes.Add(New RadTreeNode("Category " & index.ToString(), index.ToString))  
        Next 
        rootNode.AllowDrag = False 
        trvSource.ExpandAllNodes()  
 
    End Sub 
 
    Protected Sub trvSource_NodeDrop(ByVal sender As ObjectByVal e As RadTreeNodeDragDropEventArgs) Handles trvSource.NodeDrop  
 
        Dim sourceNode As RadTreeNode = e.SourceDragNode  
        Dim destNode As RadTreeNode = e.DestDragNode  
        Dim dropPosition As RadTreeViewDropPosition = e.DropPosition  
 
        If destNode IsNot Nothing Then 
            If sourceNode.TreeView.SelectedNodes.Count <= 1 Then 
                PerformDragAndDrop(dropPosition, sourceNode, destNode)  
            ElseIf sourceNode.TreeView.SelectedNodes.Count > 1 Then 
                For Each node As RadTreeNode In sourceNode.TreeView.SelectedNodes  
                    PerformDragAndDrop(dropPosition, node, destNode)  
                Next 
            End If 
            destNode.Expanded = True 
            sourceNode.TreeView.ClearSelectedNodes()  
        End If 
 
    End Sub 
 
    Private Sub PerformDragAndDrop(ByVal dropPosition As RadTreeViewDropPosition, ByVal sourceNode As RadTreeNode, ByVal destNode As RadTreeNode)  
        Select Case dropPosition  
            Case RadTreeViewDropPosition.Over  
                ' child  
                If Not sourceNode.IsAncestorOf(destNode) Then 
                    sourceNode.Owner.Nodes.Remove(sourceNode)  
                    destNode.Nodes.Add(sourceNode)  
                End If 
            Case RadTreeViewDropPosition.Above  
                ' sibling - above  
                sourceNode.Owner.Nodes.Remove(sourceNode)  
                destNode.InsertBefore(sourceNode)  
            Case RadTreeViewDropPosition.Below  
                ' sibling - below  
                sourceNode.Owner.Nodes.Remove(sourceNode)  
                destNode.InsertAfter(sourceNode)  
        End Select 
 
        Dim Result As String 
 
        Result = String.Format("DestNode: {0} Value: {1} Position: {2}", destNode.Text, destNode.Value, dropPosition.ToString) & vbCrLf  
        txtResults.Text += Result  
 
    End Sub 
 
End Class 
0
Yana
Telerik team
answered on 28 Oct 2008, 02:21 PM
Hello Colin,

Thank you for preparing the page.

Actually, when you "Drag and insert Above or Below"  e.DestDragNode is really the child node and this is by design, you have DropPosition and the dragged node is inserted in the right place. I modified the project a little, you can see that if you follow the described steps and then click "Button", the dragged node is a child of "Category 2". Please download the attached file and try it.

Regards,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
0
Colin Mulcahy
Top achievements
Rank 1
answered on 28 Oct 2008, 07:06 PM
Hi Yana,

Thank you for taking a look at the sample.

Forgive me, the logic doesn't make sense.

From the example, why then does Category10 not get added to the child node of Category8 or Category9 (depending on how you drop it) on the tree for below and above if its returning a destnode value of 8 or 9?

On the tree it gets added to the right place yet it is returning an incorrect value in codebehind.

In my case I use the value of destnode to pass it back to the database to update the vieworder and parentId of the category.

The values between the page and code behind are different.

I believe destnode shoud be returning value 2 and not 8 or 9.

My understanding of the logic is that Postion of Below and Above is on nodes on the parent which is Category2. Above and Below is simple for inserting at at a particular position within the nodes collection of Category2.

If accept the existing behaviour, how do I get the correct value in codebehind of the destnode?

I believe there is a bug. However I'm really happy for Telerik to prove otherwise. :-)

Thanks again.

Colin
0
Colin Mulcahy
Top achievements
Rank 1
answered on 28 Oct 2008, 07:20 PM
Hi Yana,

After just posting the reply above I though of trying something out.

In the method "PerformDragAndDrop" after you perform the insert based on RadTreeViewDropPosition I evaluated the value of:

sourceNode.ParentNode.Value

Guess what it returned the correct value of 2. :-)

This proves that there could be something wrong with the value property of destnode.

If this is correct, can you give an example scenario where you would want the value of 8 or 9 from destnode when infact it inserts on the parent node (category2) which is value 2.

Love to understand the reasoning.

Looking forward to hearing from you.

Colin

0
Yana
Telerik team
answered on 30 Oct 2008, 01:40 PM
Hello Colin,

If position of Below and Above refers to the parent node (category 2), how do you know above or below which child node from "category 2" nodes collection you will insert the source node?  Our online example of Drag-and-drop for RadTreeView shows how to use the value of destnode in PerformDragAndDrop method:

 switch (dropPosition)  
 {  
                case RadTreeViewDropPosition.Over:  
                    // child  
                    if (!sourceNode.IsAncestorOf(destNode))  
                    {  
                        destNode.Nodes.Add(sourceNode);  
                    }  
                    break;  
 
                case RadTreeViewDropPosition.Above:  
                    // sibling - above                      
                    destNode.InsertBefore(sourceNode);  
                    break;  
 
                case RadTreeViewDropPosition.Below:  
                    // sibling - below  
                    destNode.InsertAfter(sourceNode);  
                    break;  
            }  
 

As you can see, InsertBefore and InsertAfter methods insert the source node in the right place in the nodes collection of  parent node.

Best wishes,
Yana
the Telerik team

Check out Telerik Trainer, the state of the art learning tool for Telerik products.
Tags
TreeView
Asked by
Colin Mulcahy
Top achievements
Rank 1
Answers by
Yana
Telerik team
Colin Mulcahy
Top achievements
Rank 1
Share this question
or