drop parent on child node event

4 posts, 0 answers
  1. Justin
    Justin avatar
    3 posts
    Member since:
    Apr 2013

    Posted 10 Jun 2013 Link to this post


    I am not able to trigger the "OnClientNodeDropping"  event when a parent node is dropped onto a child node. This is required in order to execute some custom code for cloning the parent node and adding it as a child. In the attached example, I have had to use a customised picker tool to add the parent node "Everyone" to its child "My Team". This is fine for a example, but not a practical solution.

    I have tried using the method described in the below link to get the target node that the parent is dropped onto. However this will not give me the target node attributes only the html element of the node.

    Am I missing an attribute in the Telerik control ? (I have both EnableDragAndDrop and EnableDragAndDropBetweenNodes set to true), or is there something else I should be doing?


  2. Kevin
    Kevin avatar
    360 posts
    Member since:
    Jul 2012

    Posted 12 Jun 2013 Link to this post

    Hello Justin,

    Have you tried using the OnClientNodeDropped or OnClientNodeDropping? As these events give you the node that is being dropped.
  3. Justin
    Justin avatar
    3 posts
    Member since:
    Apr 2013

    Posted 12 Jun 2013 Link to this post

    Hi Kevin,

    Many thanks for your reply.

    Both the OnClientNodeDropped and OnClientNodeDropping are firing for dropping parent nodes onto other "peer" parent nodes, and child nodes on and between other nodes, but they are not firing when a parent node is dropped onto one of its child nodes as I mentioned in my initial post, which is important functionality for our current project.

    How can I access the events in the scenario of dropping a parent node onto one of its child nodes?

    Thanks again for your help

  4. Boyan Dimitrov
    Boyan Dimitrov avatar
    1968 posts

    Posted 13 Jun 2013 Link to this post

    Hello Justin,

    Your observations are absolutely correct and the OnClientNodeDropping and OnClientNodeDropped events are not fired when user tries to drop a parent node to one of its child items. Therefore I have prepared a workaround in order to implement such functionality:
    //markup code
    <telerik:RadTreeView runat="server" ID="RadTreeView1" EnableDragAndDrop="true" OnClientNodeDragStart="dragStart">
            <telerik:RadTreeNode Text="Node 1" />
            <telerik:RadTreeNode Text="Node 2">
                    <telerik:RadTreeNode Text="Node 2.1" />
                    <telerik:RadTreeNode Text="Node 2.2" />
                    <telerik:RadTreeNode Text="Node 2.3" />
            <telerik:RadTreeNode Text="Node 3" />

    function dragStart(sender, args) {
        dragging = false;
        $(document).bind("mouseup", function (e) {
            var sourceNode = args.get_node();
            var sourceNodeElement = sourceNode.get_element();
            var droppedNodeDomElement = $telerik.$(e.target).closest('li')[0];
            if ($telerik.isDescendantOrSelf(sourceNodeElement, droppedNodeDomElement)) {
                var clonedNode = sourceNode.clone();
            $(document).unbind("mouseup", arguments.callee);
            dragging = false;

    Please note that this custom code will be executed only if you are trying to drop a parent element on one of its child items.

    Boyan Dimitrov
    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 the blog feed now.
Back to Top