Restricting Drag & Drop Levels for Kendo UI TreeView

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.

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!