Drag And Drop InBetween Nodes

Thread is closed for posting
15 posts, 0 answers
  1. 63F75A2C-1F16-4AED-AFE8-B1BBD57646AD
    63F75A2C-1F16-4AED-AFE8-B1BBD57646AD avatar
    1572 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
     

  3. 7C0525B8-35B4-48EB-BAEF-05F2FE926750
    7C0525B8-35B4-48EB-BAEF-05F2FE926750 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

  5. 28F99208-1D78-419B-8A6D-3131BA462630
    28F99208-1D78-419B-8A6D-3131BA462630 avatar
    1765 posts
    Member since:
    Jan 2017

    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
  7. 7C0525B8-35B4-48EB-BAEF-05F2FE926750
    7C0525B8-35B4-48EB-BAEF-05F2FE926750 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,


  9. 7C0525B8-35B4-48EB-BAEF-05F2FE926750
    7C0525B8-35B4-48EB-BAEF-05F2FE926750 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,
  11. 28F99208-1D78-419B-8A6D-3131BA462630
    28F99208-1D78-419B-8A6D-3131BA462630 avatar
    1765 posts
    Member since:
    Jan 2017

    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
  13. 1AF4C048-AA6A-4D23-A232-EFE369CB4E97
    1AF4C048-AA6A-4D23-A232-EFE369CB4E97 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 ?
  15. 7CF8D9C0-92E1-4BF7-A304-DDF2FC57522B
    7CF8D9C0-92E1-4BF7-A304-DDF2FC57522B 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; 
    } 

  17. 1987E048-23DF-4B4E-9518-6C544F01F3F0
    1987E048-23DF-4B4E-9518-6C544F01F3F0 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é
  19. 7B04EEEE-C5D1-4AB8-953F-5C20130B4326
    7B04EEEE-C5D1-4AB8-953F-5C20130B4326 avatar
    1536 posts
    Member since:
    Sep 2012

    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
  21. 387E7F35-288E-4F80-B0BA-3ADAFD0F453B
    387E7F35-288E-4F80-B0BA-3ADAFD0F453B 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.
  23. 19646D24-82B2-48BE-8363-68015F20812F
    19646D24-82B2-48BE-8363-68015F20812F avatar
    3997 posts
    Member since:
    Jan 2017

    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
  25. 7B9ABD40-890C-4A72-A2DE-175465374306
    7B9ABD40-890C-4A72-A2DE-175465374306 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?
  27. E6D19C2C-8837-4BDE-B3CF-81E666DDA1C2
    E6D19C2C-8837-4BDE-B3CF-81E666DDA1C2 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
  29. 19646D24-82B2-48BE-8363-68015F20812F
    19646D24-82B2-48BE-8363-68015F20812F avatar
    3997 posts
    Member since:
    Jan 2017

    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

This Code Library is part of the product documentation and subject to the respective product license agreement.