Drag And Drop InBetween Nodes

15 posts, 0 answers
  1. Telerik Admin
    Telerik Admin avatar
    1679 posts
    Member since:
    Oct 2004

    Posted 17 Mar 2006 Link to this post

     

    Requirements

    r.a.d.treeview version

    5.1.3.0
    r.a.d. treeview AJAX (Prometheus)
    Telerik.Web.UI 2007.3.1425

    programming language

    VB

    .NET version

    1.1

    Visual Studio version

    2002/2003

    browser support

    all supported by r.a.d.treeview

    This sample project shows how to drag and drop a tree-node in-between other two nodes.

    RadTreeView AJAX (Prometheus) allows you to drop nodes inbetween other nodes. Set the EnableDragAndDropBetweenNodes property to True to support this behavior.
    Here are some related links:

    We used the following logic in the NodeDrop event handler:

            'Fetch event data                   
            Dim sourceNode As RadTreeNode = NodeEvent.SourceDragNode
            Dim destNode As RadTreeNode = NodeEvent.DestDragNode

            'Swap nodes in tree
            If Not (sourceNode Is destNode.Parent) Then

                Dim nodeCollectionDest As RadTreeNodeCollection = destNode.ParentNodeCollection
                sourceNode.Remove()
                Dim nodeindex As Int16 = destNode.Index
                Dim nodeindexnew As Int16 = nodeindex + 1
                nodeCollectionDest.Insert(nodeindexnew, sourceNode)
            End If
            ' Expand destination node to see result of swap immediately.
            destNode.Expanded = True
     

  2. Bernard Vandaele
    Bernard Vandaele avatar
    4 posts
    Member since:
    Jul 2006

    Posted 11 Jul 2006 Link to this post

    Hi,

    That's great code!
    But I have another trouble. How can I drag the node over other nodes to select the "right place" to drop it to INSERT to change the order? It means that it is NOT drop exactly on other node, just insert after or before that node.
    (Is there event "Node Drag" to do it? )

    Please help me solve this stuff,
    Thanks a lot,

    Regards!
    Minh

  3. Vassil Petev
    Admin
    Vassil Petev avatar
    1765 posts

    Posted 12 Jul 2006 Link to this post

    Hello Bernard,

    In the current treeview version you can drag and drop a node ON TOP of another node, to insert the dragged node before the one it has been dropped on.

    With the current code snippet, you can drag and drop a node IN BETWEEN two nodes, and insert it between these two nodes. This scenario is more intuitive to users, this is why we provide the current Code Library project. Also, this functionality will probably make it into v6 of r.a.d.treeview.

    Since, I was not able to understand your exact question, could you give us more details on what exactly you need to accomplish? From what I understand, you want to accomplish the first case above, which is actually build in the treeview. Let me know what I am missing.


    Regards,

    Rob
    the telerik team
  4. Bernard Vandaele
    Bernard Vandaele avatar
    4 posts
    Member since:
    Jul 2006

    Posted 12 Jul 2006 Link to this post

    Hi,

    I agree that now with this current code snippet  we can drag one node to ON TOP of other nodes to change the order ( the dragged node will be insert after dropped node).
    But I don't want this.
    I want that when we drag a node to ON TOP of another node, the dragged node will be inserted as a CHILD NODE of a dropped node (I already did this stuff).
    AND when we drag a node to IN BETWEEN other nodes (see attachment, between here means that the space between any nodes), dragged node will be inserted between those nodes (I don't know how to do this stuff?).

    How can?
    Looking forward to seeing your feedback,
    Thanks,


  5. Bernard Vandaele
    Bernard Vandaele avatar
    4 posts
    Member since:
    Jul 2006

    Posted 12 Jul 2006 Link to this post

    Attachment picture, you can see it here: http://quyminh.brinkster.net/images/pic1.bmp

    I want when we drag "Sent Items" node to between "Invoices" and "Junk email" node, it wil be inserted as "Invoices", "Sent Items", "Junk email" (in order, the node "Sent Items" will be placed between 2 nodes "Invoices" and "Junk email" )

    Is it possible? The current build treeview and the current code library can not do it.
    Thanks a lot,
  6. Vassil Petev
    Admin
    Vassil Petev avatar
    1765 posts

    Posted 12 Jul 2006 Link to this post

    Thank you for the additional details, Bernard, I see what you mean. I regret to say that the current version of the control does not support dropping a node in the white space between two nodes. The closest implementation we have is the example attached at the top. 

    As I noted in my previous post, this feature will appear in v6 of r.a.d.treeview, due in Q3 2006.
     

    Kind regards,
    Rob
    the telerik team
  7. Mike
    Mike avatar
    30 posts
    Member since:
    Jun 2006

    Posted 28 Jul 2006 Link to this post

    Do you got the same example in C# for Visual Studio 5 ?
  8. Poul Henningsen
    Poul Henningsen avatar
    194 posts
    Member since:
    May 2006

    Posted 28 Jul 2006 Link to this post

    --Mike,

    Try the code below; I think that should work in C#

    protected void HandleDrop(object sender, RadTreeNodeEventArgs NodeEvent) 
     RadTreeNode sourceNode = NodeEvent.SourceDragNode; 
     RadTreeNode destNode = NodeEvent.DestDragNode; 
     if (!((sourceNode == destNode.Parent))) { 
       RadTreeNodeCollection nodeCollectionDest = destNode.ParentNodeCollection; 
       sourceNode.Remove(); 
       Int16 nodeindex = destNode.Index; 
       Int16 nodeindexnew = nodeindex + 1; 
       nodeCollectionDest.Insert(nodeindexnew, sourceNode); 
     } 
     destNode.Expanded = true

  9. azimek
    azimek avatar
    7 posts
    Member since:
    Jul 2006

    Posted 07 Sep 2006 Link to this post

    Hi !

    I am using your example - load on demand client-side -
    Everything works fone so far.
    If I activate Drag and Drop, it is only possible to drag the root nodes to another root node. The nodes added by the OnNodeExpand handler do not fire an drop event! It is possible to drag an drop them, but the event is not fired! Do I have to add a handler to the node itself before adding it to the treeview?

    Please help

    André
  10. Rumen
    Admin
    Rumen avatar
    1536 posts

    Posted 07 Sep 2006 Link to this post

    Hi Andre,

    Indeed, since items are loaded on the client-side they are not available after postback (no viewstate and server side data associated with them). A possible workaround is to use ExpandMode = ExpandMode.Server side and wrap the treeview inside a r.a.d.ajax panel or ajax manager.

    Greetings,
    Rumen Stankov (MCSD.NET)
    the telerik team
  11. Alex Gamzov
    Alex Gamzov avatar
    1 posts
    Member since:
    Nov 2005

    Posted 12 Sep 2006 Link to this post

    Hi,

    Any news on Drop in white space between nodes? I didn't find this feature in the list of 6.0beta features.
  12. Nikolay
    Admin
    Nikolay avatar
    3997 posts

    Posted 12 Sep 2006 Link to this post

    Hello Alex,

    We could not implement the feature in the latest treeview edition. We postponed it for the next treeview edition. We apologize for any inconvenience this is causing you. If we manage to include the feature shortly after the official release date (25th of Sept) we will surely send you the files.

    Regards,
    Nick
    the telerik team
  13. Mike
    Mike avatar
    76 posts
    Member since:
    Nov 2004

    Posted 09 Mar 2007 Link to this post

    Just downloaded the code and nothing works. The project wont even open up? I'm currently using r.a.d.controls Q4 2006 for asp.net 2.0.

    What gives?
  14. Kevin
    Kevin avatar
    549 posts
    Member since:
    Nov 2006

    Posted 11 Mar 2007 Link to this post

    This example is outdated, since in version 6.x the treeview supports in-between dragging and dropping out of the box.

    This is documented with code here:
    http://www.telerik.com/help/aspnet/treeview/tree_treeview_DraggingInBetweenNodes.html

    And the online example is here (make sure you check the Enable drag and drop between nodes checkbox)
    http://www.telerik.com/demos/aspnet/TreeView/Examples/Functionality/DragAndDropNodes/DefaultCS.aspx
  15. Nikolay
    Admin
    Nikolay avatar
    3997 posts

    Posted 12 Mar 2007 Link to this post

    Hi Kevin,

    Actually, the DragAndDropInBetweenNodes property is set in the codebehind of the example:
    private void ChbBetweenNodes_CheckedChanged(object sender, System.EventArgs e)
            {
                RadTree1.DragAndDropBetweenNodes = !RadTree1.DragAndDropBetweenNodes;
                RadTree2.DragAndDropBetweenNodes = !RadTree2.DragAndDropBetweenNodes;
           
            }
        }

    Am I missing something?

    Kind regards,
    Nick
    the telerik team
Back to Top