Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > TreeView > Drag And Drop InBetween Nodes

Drag And Drop InBetween Nodes

Feed from this thread
  • Telerik Admin Master avatar

    Posted on Mar 17, 2006 (permalink)

     

    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
     

    Reply

  • Bernard Vandaele avatar

    Posted on Jul 11, 2006 (permalink)

    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

    Reply

  • Vassil Petev Vassil Petev admin's avatar

    Posted on Jul 12, 2006 (permalink)

    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

    Reply

  • Bernard Vandaele avatar

    Posted on Jul 12, 2006 (permalink)

    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,


    Reply

  • Bernard Vandaele avatar

    Posted on Jul 12, 2006 (permalink)

    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,

    Reply

  • Vassil Petev Vassil Petev admin's avatar

    Posted on Jul 12, 2006 (permalink)

    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

    Reply

  • Mike avatar

    Posted on Jul 28, 2006 (permalink)

    Do you got the same example in C# for Visual Studio 5 ?

    Reply

  • Poul Henningsen Master avatar

    Posted on Jul 28, 2006 (permalink)

    --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; 
    } 

    Reply

  • azimek avatar

    Posted on Sep 7, 2006 (permalink)

    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é

    Reply

  • Rumen Rumen admin's avatar

    Posted on Sep 7, 2006 (permalink)

    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

    Reply

  • Alex Gamzov avatar

    Posted on Sep 12, 2006 (permalink)

    Hi,

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

    Reply

  • Nick Nick admin's avatar

    Posted on Sep 12, 2006 (permalink)

    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

    Reply

  • Mike avatar

    Posted on Mar 9, 2007 (permalink)

    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?

    Reply

  • Kevin Master avatar

    Posted on Mar 11, 2007 (permalink)

    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

    Reply

  • Nick Nick admin's avatar

    Posted on Mar 12, 2007 (permalink)

    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

    Reply

Back to Top

Skip Navigation LinksHome / Community & Support / Code Library / ASP.NET AJAX > TreeView > Drag And Drop InBetween Nodes