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

drag and drop in RadTreeView replaces template with text

11 Answers 248 Views
TreeView
This is a migrated thread and some comments may be shown as answers.
Nicholas Cloud
Top achievements
Rank 1
Nicholas Cloud asked on 15 Feb 2010, 08:03 PM
Hi, I am trying to get client-side drag-n-drop working for a RadTreeView.  Each node is templated.  When I drag a node, the drag-n-drop works fine, but the node looses it's template and instead displays the fully qualified name of the data bound object in plain text (all client-side; no AJAX yet).  Here is my code.  See the attachment for how the tree looks *after* I drag and drop nodes (fully qualified names blurred).

Telerik.Web.UI.RadTreeNode.prototype.insertBefore = function(destinationNode) { 
    var parent = destinationNode.get_parent(); 
    var index = parent.get_nodes().indexOf(destinationNode); 
    parent.get_nodes().insert(index, this); 
}; 
 
Telerik.Web.UI.RadTreeNode.prototype.insertAfter = function(destinationNode) { 
    var parent = destinationNode.get_parent(); 
    var index = parent.get_nodes().indexOf(destinationNode); 
    parent.get_nodes().insert(index + 1, this); 
}; 
 
Telerik.Web.UI.RadTreeNode.prototype.positionRelativeTo = function(destinationNode, dropPosition) { 
     
    switch(dropPosition) { 
        case "over"
            destinationNode.get_nodes().add(this); 
            break
        case "above"
            this.insertBefore(destinationNode); 
            break
        case "below"
            this.insertAfter(destinationNode); 
            break
        default: 
            break
    } 
}; 
 
//actual client event handler 
function nodeDropping(sender, eventArgs) { 
 
    var source = eventArgs.get_sourceNode(); 
    var destination = eventArgs.get_destNode(); 
    var position = eventArgs.get_dropPosition(); 
     
    sender.trackChanges(); 
 
    source.positionRelativeTo(destination, position); 
     
    sender.commitChanges(); 

Thanks!

11 Answers, 1 is accepted

Sort by
0
Nicholas Cloud
Top achievements
Rank 1
answered on 15 Feb 2010, 08:15 PM
Another strange anomaly I'm seeing is that when I drag a node, the template will appear duplicated on the screen far above where I am dragging and dropping.  On the attached screenshot, I am dragging "Team N" onto "Team L" (yellow line), and you can see how the template for "Team N" is being duplicated further up the screen (red line).  Once I release the mouse button, the duplicated template disappears, the node is moved, but it only shows text under "Team L".
0
Accepted
Veronica
Telerik team
answered on 17 Feb 2010, 02:46 PM
Hello Nicholas Cloud,

You can not use a Client Drag & Drop for a RadTreeView with Templates. Try using a server-side:

protected void RadTreeView1_NodeDrop(object sender, RadTreeNodeDragDropEventArgs e)
        {
            RadTreeNode sourceNode = e.SourceDragNode;
            RadTreeNode destNode = e.DestDragNode;
            RadTreeViewDropPosition dropPosition = e.DropPosition;
  
            if (sourceNode.TreeView.SelectedNodes.Count <= 1)
            {
                PerformDragAndDrop(dropPosition, sourceNode, destNode);
            }
            else if (sourceNode.TreeView.SelectedNodes.Count > 1)
            {
                foreach (RadTreeNode node in sourceNode.TreeView.SelectedNodes)
                {
                    PerformDragAndDrop(dropPosition, node, destNode);
                }
            }
            destNode.Expanded = true;
            sourceNode.TreeView.ClearSelectedNodes();
            RadTreeView1.DataBind();
        }
  
        private static void PerformDragAndDrop(RadTreeViewDropPosition dropPosition, RadTreeNode sourceNode,
         RadTreeNode destNode)
        {
            if (sourceNode.Equals(destNode) || sourceNode.IsAncestorOf(destNode))
            {
                return;
            }
            sourceNode.Owner.Nodes.Remove(sourceNode);
  
            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;
            }
        }
 
If you still have a problems please attach the full code.

Best wishes,
Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Nicholas Cloud
Top achievements
Rank 1
answered on 17 Feb 2010, 02:54 PM
Thanks for the information.  It seems odd to me that drag-and-drop wouldn't be supported for templated items client-side.  Since nodes are DOM-element wrappers, why wouldn't the rendered template DOM elements travel with them when the nodes are moved?
0
Veronica
Telerik team
answered on 18 Feb 2010, 05:22 PM
Hi Nicholas Cloud,

Currently, RadTreeView does not support client templates. We will add this feature in one of the next releases. Consequently, the drag-and-drop functionality is not possible in this scenario since the templates are instantiated server side.


Veronica Milcheva
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.
0
Nicholas Cloud
Top achievements
Rank 1
answered on 19 Feb 2010, 02:18 PM
Thanks Veronica, the server-side code works well.  I look forward to future releases.
0
Tina
Top achievements
Rank 1
answered on 15 Apr 2011, 05:58 PM
I just ran into this same problem.  What's the ETA on the next version that includes client side drag and drop with templates?

I'm also having a problem where my templates disappear off the tree after a series of drag and drops???  Has anyone seen this?
0
Tina
Top achievements
Rank 1
answered on 16 Apr 2011, 04:29 PM
Here's some additional information . . . .

I used the server-side code posted above.  Please see attached JPG.  Thanks.


<telerik:RadTreeView ID="RadTreeView1" runat="server" EnableDragAndDrop="true" EnableDragAndDropBetweenNodes="true" MultipleSelect="true"  OnNodeDrop="RadTreeView_NodeDrop">
     <Nodes>
         <telerik:RadTreeNode runat="server" ExpandMode="ClientSide" Text="Bags For City" Expanded="true">
         <Nodes>
             <telerik:RadTreeNode  Expanded="true">
                 <NodeTemplate>
                 <div
                    <table>
                     <tr>
                         <td><p>Sort by</p></td>
                         <td><asp:DropDownList ID="columnDropDown" runat="server">
                             <asp:ListItem>Column 1</asp:ListItem>
                             <asp:ListItem>Column 2</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>in</p></td>
                         <td><asp:DropDownList ID="orderDropDown" runat="server">
                             <asp:ListItem>Ascending</asp:ListItem>
                             <asp:ListItem>Desending</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>order</p></td>
                     </tr>
                    </table
                 </div>   
                 </NodeTemplate
             </telerik:RadTreeNode>
             <telerik:RadTreeNode  Expanded="true">
                 <NodeTemplate>
                 <div
                    <table>
                     <tr>
                         <td><p>Then sort by</p></td>
                         <td><asp:DropDownList ID="columnDropDown" runat="server">
                             <asp:ListItem>Column 1</asp:ListItem>
                             <asp:ListItem>Column 2</asp:ListItem>
                             <asp:ListItem>Column 3</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>in</p></td>
                         <td><asp:DropDownList ID="orderDropDown" runat="server">
                             <asp:ListItem>Ascending</asp:ListItem>
                             <asp:ListItem>Desending</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>order</p></td>
                     </tr>
                    </table
                 </div>   
                 </NodeTemplate
             </telerik:RadTreeNode>
             <telerik:RadTreeNode  Expanded="true">
                 <NodeTemplate>
                 <div
                    <table>
                     <tr>
                         <td><p>Then sort by</p></td>
                         <td><asp:DropDownList ID="columnDropDown" runat="server">
                             <asp:ListItem>Column 1</asp:ListItem>
                             <asp:ListItem>Column 2</asp:ListItem>
                             <asp:ListItem>Column 3</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>in</p></td>
                         <td><asp:DropDownList ID="orderDropDown" runat="server">
                             <asp:ListItem>Ascending</asp:ListItem>
                             <asp:ListItem>Desending</asp:ListItem>
                         </asp:DropDownList></td>
                         <td><p>order</p></td>
                     </tr>
                    </table
                 </div>   
                 </NodeTemplate
             </telerik:RadTreeNode>
         </Nodes>
         </telerik:RadTreeNode>
     </Nodes>
 </telerik:RadTreeView>

0
Veronica
Telerik team
answered on 21 Apr 2011, 08:54 AM
Hi Tina,

The issue is because when you use templates and perform drag & drop after a period of time the inner control tree can not be recreated. When ASP.NET tries to load the viewstate of the control it's expecting the previous control you added, but it will encounter another control instead (after drop) in the place of the first control.

The solution is to set the EnableViewState property to "false" of the RadTreeView.

Regards,
Veronica Milcheva
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

0
Kjell
Top achievements
Rank 1
answered on 14 Dec 2012, 03:59 AM
I'm having a similar issue, I'm pretty sure I'm doing something wrong but I'm not sure how to fix it.

My treeview is bound to an ObjectDataSource.  But I also have a button on the page which allows the user to add a node via client side code.  I set the template in the function which adds the note, but I also have an identical NodeTemplate.  So if the item came from the ObjectDataSource it gets the template and if it was added client side then it also gets the template.  I am using client side drag/drop.  If I drag/drop a node which was added on the client side it works fine, if I drag/drop a node which came from the ObjectDataSource then it works but it loses the template.

Basically the initial tree nodes load from the ObjectDataSource, but then any editing is done client side (drag drop, add, remove).  The data is stored in SQL but it doesn't gave updated until the user hits a "Save" button, at which point the ObjectDataSource is updated as well.  I think the problem is my mix of client and server side stuff, but I'm not sure what the solution is.  Any suggestions?  I don't want to update SQL until the user hits Save.
0
Kjell
Top achievements
Rank 1
answered on 17 Dec 2012, 10:25 PM
bump
0
Kate
Telerik team
answered on 18 Dec 2012, 01:50 PM
Hi Kjell,

My best suggestion would be that you open a support ticket where you can attach a very simplified runnable project that we can debug locally and determine what is causing the problematic behavior. Thus, we can inspect it thoroughly and help you in the most efficient way.

Greetings,
Kate
the Telerik team
If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.
Tags
TreeView
Asked by
Nicholas Cloud
Top achievements
Rank 1
Answers by
Nicholas Cloud
Top achievements
Rank 1
Veronica
Telerik team
Tina
Top achievements
Rank 1
Kjell
Top achievements
Rank 1
Kate
Telerik team
Share this question
or