drag and drop in RadTreeView replaces template with text

12 posts, 1 answers
  1. Nicholas Cloud
    Nicholas Cloud avatar
    7 posts
    Member since:
    Feb 2010

    Posted 15 Feb 2010 Link to this post

    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!
  2. Nicholas Cloud
    Nicholas Cloud avatar
    7 posts
    Member since:
    Feb 2010

    Posted 15 Feb 2010 Link to this post

    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".
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Answer
    Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 17 Feb 2010 Link to this post

    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.
  5. Nicholas Cloud
    Nicholas Cloud avatar
    7 posts
    Member since:
    Feb 2010

    Posted 17 Feb 2010 Link to this post

    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?
  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 18 Feb 2010 Link to this post

    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.
  7. Nicholas Cloud
    Nicholas Cloud avatar
    7 posts
    Member since:
    Feb 2010

    Posted 19 Feb 2010 Link to this post

    Thanks Veronica, the server-side code works well.  I look forward to future releases.
  8. Tina
    Tina avatar
    7 posts
    Member since:
    Apr 2011

    Posted 15 Apr 2011 Link to this post

    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?
  9. Tina
    Tina avatar
    7 posts
    Member since:
    Apr 2011

    Posted 16 Apr 2011 Link to this post

    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>

  10. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 21 Apr 2011 Link to this post

    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.

  11. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 13 Dec 2012 Link to this post

    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.
  12. Kjell
    Kjell avatar
    276 posts
    Member since:
    Jun 2010

    Posted 17 Dec 2012 Link to this post

    bump
  13. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 18 Dec 2012 Link to this post

    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017