Drag And Drop Destimation Node

8 posts, 0 answers
  1. Colin Mulcahy
    Colin Mulcahy avatar
    13 posts
    Member since:
    Jul 2003

    Posted 23 Oct 2008 Link to this post

    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.
  2. Yana
    Admin
    Yana avatar
    4806 posts

    Posted 24 Oct 2008 Link to this post

    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.
  3. Colin Mulcahy
    Colin Mulcahy avatar
    13 posts
    Member since:
    Jul 2003

    Posted 27 Oct 2008 Link to this post

    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 
  4. Colin Mulcahy
    Colin Mulcahy avatar
    13 posts
    Member since:
    Jul 2003

    Posted 27 Oct 2008 Link to this post

    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 
  5. Yana
    Admin
    Yana avatar
    4806 posts

    Posted 28 Oct 2008 Link to this post

    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.
  6. Colin Mulcahy
    Colin Mulcahy avatar
    13 posts
    Member since:
    Jul 2003

    Posted 28 Oct 2008 Link to this post

    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
  7. Colin Mulcahy
    Colin Mulcahy avatar
    13 posts
    Member since:
    Jul 2003

    Posted 28 Oct 2008 Link to this post

    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

  8. Yana
    Admin
    Yana avatar
    4806 posts

    Posted 30 Oct 2008 Link to this post

    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.
Back to Top