Restricting Drag & Drop Levels for Kendo UI TreeView

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.
Rachel finds joy in meeting challenges in her career and her life. After deciding to pursue a career in electronics, and as one of only a handful of female students in her department, Rachel graduated at the top of her class with a BS in Electrical and Computer Engineering from Oklahoma State University. Two years after graduation, she was leading the software design team on a multi-million dollar testing system for the Department of Energy. Rachel has experience in circuitry design and automated test systems, but her true passion has always been for software. Rachel loves to spend time with her husband and daughters on their Oklahoma 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.

    • http://www.falafel.com Rachel Hill Hagerman

      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.

        • http://www.falafel.com Rachel Hill Hagerman

          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);

          }