RadTreeView Drag & Drop

16 posts, 0 answers
  1. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 11 Feb 2010 Link to this post

    Hi,

    I am currently wanting to implement the RadTreeView drag and drop functionality. I only need to use one tree, but users must be able to modify the tree structure by dragging and dropping items into different areas of the tree. I'm not too familiar with JavaScript, so would appreciate it if someone could help me modify the JavaScript found here to implement the above scenario.

    http://demos.telerik.com/aspnet-ajax/treeview/examples/functionality/draganddropnodes/defaultcs.aspx

    Thanks in advance,
    Rosco
  2. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 12 Feb 2010 Link to this post

    Hi Rosco,

    Thanks for your question.

    I've made an example for you to show you how to use RadTreeView Drag&Drop functionality for one tree. You can see it in the attached .zip file.

    Please let me know if this was helpful.

    Regards,
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 12 Feb 2010 Link to this post

    Thank you so much Veronica, it was exactly what I was looking for.

    Kind regards,
    Rosco
  5. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 13 Feb 2010 Link to this post

    Hi Veronica,

    I would appreciate it if you could step me through the code, so I can get a better understanding of what is going on. I'll start with the JavaScript.

    onNodeDropping
    Where are the get_destNode(), get_sourceNodes(), and getHtmlElement() functions defined?

            function onNodeDropping(sender, args) {  
                var dest = args.get_destNode();  
                if (dest) {  
                    dropOnTree(args);  
                }  
                else {  
                    dropOnHtmlElement(args);  
                }  
            }  
     
            function dropOnTree(args) {  
                var text = "";  
     
                if (args.get_sourceNodes().length) {  
                    var i;  
                    for (i = 0; i < args.get_sourceNodes().length; i++) {  
                        var node = args.get_sourceNodes()[i];  
                        text = text + ', ' + node.get_text();  
                    }  
                }  
            }  
     
            function onNodeDragging(sender, args) {  
                var target = args.get_htmlElement();  
     
                if (!target) return;  
     
                if (target.tagName == "INPUT") {  
                    target.style.cursor = "hand";  
                }  
            } 

    And now the codebehind:

                RadTreeNode sourceNode = e.SourceDragNode;    
                RadTreeNode destNode = e.DestDragNode;   
                RadTreeViewDropPosition dropPosition = e.DropPosition; 

    My understanding is that the sourceNode is the node that has been selected and is being dragged and the destNode is the node that the sourceNode is being dragged onto. What does the dropPosition represent?

    Thanks in advance,
    Rosco
  6. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 15 Feb 2010 Link to this post

    Hello Rosco,

    Thanks for contacting us again.

    The good news is that the Q1 2010 release will provide javascript IntelliSense which will make it easier to understand what functions do. The Beta release will go live tomorrow (16/02/2010).

    Another way to understand what a function does is to refer to the documentation here.

    I modified the code because there are two ways to implement drag&drop functionallity - Server-Side and Client-Side.

    RadTreeView1 relies on the server-side method - so it needs no JavaScript. All the functionallity is provided in Code-Behind in RadTreeView1_NodeDrop.

    RadTreeView2 depends on the Client-Side method. It uses 3 javascript functions: dropOnTree() , onNodeDropping() and clientSideEdit(). Also there are 2 helper functions: insertBefore() and InsertAfter().

    I'll walk you through the Javascript code:

    function onNodeDropping(sender, args) {
                var dest = args.get_destNode();
                debugger;
                if (dest) {
                    clientSideEdit(sender, args);
                    args.set_cancel(true);
                    return;
                    dropOnTree(args);
                }
            }

    get_destNode() retrieves a reference to the destination node, i.e. the node that is being dropped onto. In the function clientSideEdit is used  get_sourceNodes() function. It returns an array of all the nodes being dragged. It is useful when MultipleSelect is True. We iterate through the array and check the dropPosition. dropPosition is the position at which the user drops the source node(s).
    There are 3 values:

    - over - used when you drag and drop a node over another node

    - above and below  - used when you want to drop a node between other nodes.

    function clientSideEdit(sender, args) {
                var destinationNode = args.get_destNode();
      
                if (destinationNode) {
                    var secondTreeView = $find('RadTreeView2');
      
                    secondTreeView.trackChanges();
                    var sourceNodes = args.get_sourceNodes();
                    for (var i = 0; i < sourceNodes.length; i++) {
                        var sourceNode = sourceNodes[i];
                        sourceNode.get_parent().get_nodes().remove(sourceNode);
      
                        if (args.get_dropPosition() == "over") destinationNode.get_nodes().add(sourceNode);
                        if (args.get_dropPosition() == "above") insertBefore(destinationNode, sourceNode);
                        if (args.get_dropPosition() == "below") insertAfter(destinationNode, sourceNode);
                    }
                    destinationNode.set_expanded(true);
                    secondTreeView.commitChanges();
                }
            }

    In the code-behing (Default.aspx.cs):

    You are right about "the sourceNode is the node that has been selected and is being dragged and the destNode is the node that the sourceNode is being dragged onto."
         RadTreeNode sourceNode = e.SourceDragNode;
    RadTreeNode destNode = e.DestDragNode;
    RadTreeViewDropPosition dropPosition = e.DropPosition;

    I've attached the new example in a zip file.

    If you have further questions don't hesitate to contact us.


    Regards,
    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. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 18 Feb 2010 Link to this post

    Thanks a lot for that Veronica, it makes more sense now. I have got the tree displayed correctly, and the drag and drop functionality working as well. I've also managed to open a web page in a new window when a node is double-clicked. I need to refine this functionality though, as a different web page needs to open depending on the node clicked.

    string url = "http://url.for.node1";  
    RadTreeNode node1 = new RadTreeNode("Node 1");  
    this.tree.Nodes.Add(node1); 


            function DoubleClick(sender, args) {  
                var source = args.get_node();  
                window.open(...);  
            } 

    My question is, how can I access the url in the code-behind from within the window.open function?

    Regards,
    Rosco
  8. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 19 Feb 2010 Link to this post

    Hi Rosco,

    Thanks for your question. It is very good that you become more familiar with JavaScript. Keep up the good work!

    For the current question:
    get_navigateUrl() - Returns the URL of the Node(the href attribute of the link). Null if the NavigateUrl server property is not set.

    Try this as a solution:
    You may set the NavigateUrl property of each node so when the node is clicked the web page will be opened. My advice is to use object initializer when you write in the aspx.cs page - that way the code will be shortened (in the example below only one row):
    RadTreeView1.Nodes.Add(new RadTreeNode("New node", "0", "http://google.com"));

    With this you will need no JavaScript function to execute the opening of the web page.

    If you have more questions -  you are welcome. Please let me know if this was helpful.

    Sincerely yours,
    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.
  9. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 20 Feb 2010 Link to this post

    Yes I have tried using the NavigateUrl property, but this only works when a node is single clicked. What I want is to open a different URL (depending on the node clicked) when a node is double clicked. So, is there a way to pass a url string from the code-behind, into the client side double-click handler?
  10. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 21 Feb 2010 Link to this post

    Please ignore my last message. I managed to figure it out using custom attributes.
  11. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 25 Feb 2010 Link to this post

    Hi,

    I am currently trying to configure the tree view so that it will not allow me to drop a node onto certain other nodes. I have implemented this feature by setting up rules in the drag and drop handlers, but I want to know how I can disable the highlight feature when a node is being dragged above another node, which it cannot be dropped on. I want to use this as a visual indicator that this operation is not allowed.

    How can I disable the highlight feature?
  12. Veronica
    Admin
    Veronica avatar
    1213 posts

    Posted 26 Feb 2010 Link to this post

    Hello Rosco,

    Thanks for your question.

    Actually there is a property for forbidding dropping on some nodes AllowDrop="false":

    <telerik:RadTreeNode runat="server" Text="Child RadTreeNode 1.1" AllowDrop="false">
    </telerik:RadTreeNode>

    When you use it - you'll see a "stop" icon appearing when you try to drop a node onto forbidden one.

    Please let me know if this was helpful.

    Greetings,
    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.
  13. Rosco
    Rosco avatar
    32 posts
    Member since:
    Oct 2008

    Posted 27 Feb 2010 Link to this post

    Yup that's exactly what I've been looking for :)
  14. Hari Prasad
    Hari  Prasad avatar
    16 posts
    Member since:
    Feb 2010

    Posted 05 Aug 2011 Link to this post

    Even I have similar problem. I have 2 nodes both are having the properties AllowDrop=false and AllowDrag=true, so if I drag and moved to somewhere and again i have placed it in same place, the stop icon is showing and it's not going until i select other node. and also if drop it there, the clientnode click event is firing. it should not happen for me. stop icon should go. any suggestions

    Thanks in Advance
    Hari.
  15. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 10 Aug 2011 Link to this post

    Hi Hari,

    The AllowDrop=false  property is the one that force the icon to appear and since you have set it to the node it is an expected behaviour.

    I tested your second observation as well and it looks that OnClientNodeclick event actually is not fired, only if you hold the mouse over a node that can be expanded while dragging , the node expands, no matter of you drop or not. That is expected as well in order to give you a chance to drop the node over some of the children.

    Hope this explained the issues.


    Best wishes, Plamen Zdravkov
    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.

  16. Chandrak
    Chandrak avatar
    12 posts
    Member since:
    Oct 2012

    Posted 24 Nov 2012 Link to this post

    Hi,

    I have RadTree and RadMultiPage controls on same page. RadPageView loads different aspx pages using contentrul property.  
    Some of the RadPageViews have RadCharts and some of them have RadGrids. Now, I want drag drop functionality between RadTree and RadMultipage's individual tabs.

    (1) Drag from tree and over to tab area. While doing so that tab should become active and now user should be able to drop node to either chart or grid whatever is available on the tab page.

    (2) Drag from tree and drop to active tab page's graph or grid.

    I need code for either of the two. First is more professional approach while in second case user first has to activate tab and then have drag-drop operation. 

    In our application these tree nodes are everything and entire business logic is around them so this is very critical need.

    Thanks
    Chandresh

  17. Plamen
    Admin
    Plamen avatar
    2734 posts

    Posted 28 Nov 2012 Link to this post

    Hi Chandresh,

     
    Performing such Drag and Drop operations (over a RadTabStrip and another aspx page) are not supported scenarios out of the box. You can review our on-line demo where the possible drag and drop scenarios are explained.

    Hope this information will be helpful.

    Regards,
    Plamen
    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