DnD Node into Custom Control Node

4 posts, 0 answers
  1. PCS
    PCS avatar
    2 posts
    Member since:
    Jan 2012

    Posted 04 Apr 2012 Link to this post

    Hi 

    I have an issue I hope someone can help with. I have two tree's (Source, Destination). Source contains simple text nodes in a hierarchical format (fields from a form)

    Source Tree
    - Application
    - Properties
    Age of Applicant
    Mobile Phone

    The destination tree is made up on nodes containing custom controls. I create them on the fly using Node.Controls.Add(customControl). I rebuild the Destination tree on each Postback so that the tree remains consistent.

    Destination Tree

    - Root (Custom Control in Node - Label)
    - Process 1 (Custom Control in Node - No Fields)
    Action 1 (Custom Control in Node - Text Box, Labels)
    Query 1 (Custom Control in Node - Text Boxes, Labels)

    Inside my Action 1 custom control I have various fields. I need to be able to drag a node from Source onto the Text field held in the Custom Control contained within the node on the Destination tree.

    So far nothing has worked. Dragging from Source to Destination only triggers the Destination Node on drop (so I don't know which Custom Control field it was dropped onto - Html, and I don't get anything from HtmlElementID when dropping over the actual field.

    I've tried disabling Drop on the Destination Nodes (in the hope that the custom control fields could then be seen) but this didn't work, as it brings up the Can't Drop icon.

    Is this possible with the current Telerik controls?

    Thanks

    Steve
  2. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 09 Apr 2012 Link to this post

    Hello Steve,

     
    Such behavior is not implemented in the drag and drop functionality of RadTreeView because the drop event is not fired each time due to the html that is generated in the node.

    It is also not very clear what should be the expected behavior when you drop a node on such template. You can refer to our Drag and Drop demo and review how the different drops are working usually.

    Would you please explain what exactly are you trying to achieve when the node is dropped on the textbox and on the destination node area?
      

    Kind regards,
    Plamen Zdravkov
    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. PCS
    PCS avatar
    2 posts
    Member since:
    Jan 2012

    Posted 09 Apr 2012 Link to this post

    You already support drag and drop to a HTML Element. You demo of it is here:

    http://www.telerik.com/help/aspnet-ajax/treeview-drag-and-drop-to-html.html

    All I'm doing is adding a custom control that contains HTML elements (text boxes, asp Panels) to each tree node. When another tree node is drag to the tree node containing the HTML element, I want the HtmlElementID is populated. Right now, only the DestNode field is populated. The drop does not go into the tree node custom control to select the actual Html Element the node was dropped onto.

    In short, I would like the Html Elements contained within a tree node to be drop targets, rather than just the entire containing node from swallowing the drop request.

    Thanks

    Steve
  5. Plamen
    Admin
    Plamen avatar
    2729 posts

    Posted 11 Apr 2012 Link to this post

    Hi Steve,

     
    If you want to use the server event you can find the control by using the FindControl property RadTreeNode as in the code bellow that I added to our on-line demo and it worked as expected at my side:

    protected void RadTreeView1_HandleDrop(object sender, RadTreeNodeDragDropEventArgs e)
            {
               TextBox a= e.DestDragNode.FindControl("TB") as TextBox;
               a.Text = e.SourceDragNode.Text;
    <NodeTemplate>
                            <asp:TextBox runat="server" ID="TB" />
                         
                            <asp:Label Text="text" runat="server" />
                        </NodeTemplate>

    You can also consider using the client onNodeDropping event as in the code bellow :
    function onNodeDropping(sender, args)
                    {  
                        var dest = args.get_destNode();
                        var element = args.get_htmlElement();
                        if (dest && element.tagName.toUpperCase() == "INPUT") {
                           dropOnHtmlElement(args);
                          args.set_cancel(true);
                          return;
                        }

    Hope some of these solutions will be help you.

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