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 daughter on their Oklahoma cattle ranch enjoying horseback riding, taking photos, and making memories with her extended family.