[Solved] Limit drag-n-drop to 4 levels deep

[Missing User]

My treeview needs to be limited to 4 levels deep. I want to allow a user to rearrange the nodes using drag and drop, as long as doing so does not cause any nodes to exceed the 4 level limit.

I want to use javascript to determine the greatest level of all child/grandchild/greatgrandchild nodes of the node being drug, then compare that to the level of the desitination node, and thereby ensure the total combination does not exceed 4 levels.

Any help in doing this would be appreciated!

[Nikolay]

Hello Cheri Verdend,

You can hook on the OnClientNodeDropping event. You can get the source and destination nodes from the event arguments and check their level like:

<script type="text/javascript" language="javascript">
    function ClientNodeDropping(sender, eventArgs)
    {  
       if ((eventArgs.get_sourceNode().get_level() > 4) && (eventArgs.get_destNode().get_level()>4) )
       {          
           eventArgs.set_cancel(true);
       }      
    }
</script>
<telerik:RadTreeView
    ID="RadTreeView1"
    runat="server"
    EnableDragAndDrop="True"   
    OnClientNodeDropping="ClientNodeDropping" >
</telerik:RadTreeView>

Hope this helps.

Best wishes,
Nick
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Missing User]

Hi Nick,

Thanks for your reply. That will get me started. But I need to check the node being moved and also all the children being moved to make sure the deepest child doesn't exceed 4 levels deep. 

For example, given the following tree:

Root
  Child 1
     grandchild 1
     grandchild 2
  Child 2
     grandchild 3
        greatgrandchild 1
     grandchild 4
  Child 3   

Even though Child 1 and Child 2 are both on level 2, only Child 1 would be allowed to move under Child 3 because moving Child 2 would cause the greatgrandchild to exceed level 4.  

So I need to get the level of the deepest child of the node being moved. That's the part I'm unsure of how to do.

Thanks in advance for your help!

[Dimitar Milushev]

Hello Cheri Verdend,

Please find attached a project that demonstrates extending event handler to properly handle your scenario. The main work happens in the getHierarchyDepth function that finds the level of the deepest child of a node (relative to the initially passed node). Then we check if the deepest child depth plus the level of the destination node exceeds 3 (first level is 0) and we cancel the event if it does.

I hope this helps.

Regards,
Dimitar Milushev
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[Missing User]

Sorry, I was out for a few days. I just got back and tried your solution. It works perfectly! That is such a weight off my shoulders.

Thank you so much!

Cheri