Colin Mulcahy
Top achievements
Rank 1
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.
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
0
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.
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
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
Code behind:
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 Object, ByVal e As System.EventArgs) Handles Me.Load |
| If Not Page.IsPostBack Then |
| LoadData() |
| End If |
| End Sub |
| Protected Sub cmdReset_Click(ByVal sender As Object, ByVal 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 Object, ByVal 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
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
Code behind:
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 Object, ByVal e As System.EventArgs) Handles Me.Load |
| If Not Page.IsPostBack Then |
| LoadData() |
| End If |
| End Sub |
| Protected Sub cmdReset_Click(ByVal sender As Object, ByVal 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 Object, ByVal 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
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.
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
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
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
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:
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
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:
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.
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.