Restricting Drag & Drop Levels for Kendo UI TreeView

By April 28, 2014JavaScript
image_thumb-21

Drag and drop for the Kendo UI TreeView works so well straight out of the box that you may use it for a while without ever needing customization.  And even when you do, the TreeView events make it simple to manipulate the operations.  Take for example a situation where the user should be allowed to drag and drop, but not to alter the original level (parent or child) of the items themselves. 

All we need is some property on the DataSource items that can tell us if an item is a Parent, and then do some simple validation within the onDrop event handler.  For trees with more than 2 levels, you could use an integer for checking.  The idea is that the user can move Child items around by changing their order or changing their Parent, but cannot promote a Child item to Parent or vice versa.


onDrop: function(e) {
var data
= $(#treeview).data(kendoTreeView).dataItem(e.sourceNode);
var newData
= $(#treeview).data(kendoTreeView).dataItem(e.destinationNode);
// do not allow changing levels
if (data.IsParent != newData.IsParent && e.dropPosition != "over") {
e.setValid(
false);
}
// do not allow adding to children
if (!newData.IsParent && e.dropPosition == "over") {
e.setValid(
false);
}
}

By using e.setValid(false), we tell the Treeview to animate the dropped item back to its original location, which lets the user know the operation was not valid.

image

All the animation and hint images we get built-in from the TreeView – thanks, Kendo! 

Here is the entire example in action:

Did you learn something? I really recommend you attend FalafelCON 2014, where there will be many deep dives on Kendo UI. Let me know you’re coming on Twitter!

The following two tabs change content below.
A Software Engineer with over 8 years experience, Rachel has experience in circuitry design and automated test systems, but her true passion has always been for software. When she's not at the keyboard developing software, Rachel loves to spend time with her husband and daughters on their cattle ranch enjoying horseback riding, taking photos, and making memories with her extended family.
  • anitha

    Is there any way to control the restriction symbol while drag the tree node from parent to child. I mean i don’t want to show ‘+’ symbol while drag the parent to child.

    • anitha, you would want to handle the drag event instead of drop, and set e.setStatusClass(‘k-denied’) instead of e.setValid, but the idea would be the same – determine the level of both the item being dragged and the drop target, and then determine if it is a valid drop.

      • anitha

        Hi Rachel , Thanks for the reply, I have tried this but i am not able to get destination properties in Drag event, it will through the undefined exceptions. Based on the destination properties only i can apply the ‘k-denied’ class.

        • You’re right, there is no destinationNode for the drag event. But you can use the dropTarget property instead. You will just need to make sure it is a node element, and then get the tree node from there:

          var nodeElement = $(e.dropTarget).closest(“.k-item”);

          if (nodeElement.length && nodeElement.parents(“.k-treeview”).length) {

          // the dropTarget is within the treeview,

          // `nodeElement` is the closest treeview item

          var newData = $(‘#treeview’).data(‘kendoTreeView’).dataItem(nodeElement);

          }