telerik kendo treeview - prevent dragging outside of parent

drag-and-drop, kendo-ui, telerik, treeview

Solution

Lets define the `treeview`:

var tree = $("#tree").kendoTreeView({
    dataSource :content,
    dragAndDrop:true
}).data("kendoTreeView");

What I'm going to do is add a `drop` callback where I will control that:

- We are not dropping outside the tree

- We are not dropping before or after the first node of the tree

The definition of the tree would be:

var tree = $("#tree").kendoTreeView({
    dataSource :content,
    dragAndDrop:true,
    drop       :function (ev) {
        var dst = tree.dataItem(ev.destinationNode);
        var first = tree.dataItem(".k-item:first");
        var pos = ev.dropPosition;
        if (dst && dst.uid === first.uid && pos !== "over") {
            console.log("invalid");
            ev.setValid(false);
        }
    }
}).data("kendoTreeView");

Check http://docs.kendoui.com/api/web/treeview#drop for information on `drop` event.

Problem

I'm trying to prevent the dragging and dropping of nodes outside of the parent node ("LLCA") with no luck. Any suggestions? Image of Treeview I ended up getting it to work using your code below: ``` function onDrop(e) { var dst = e.destinationNode; var first = $('.k-item:first'); var pos = e.dropPosition; if (dst && dst.uid === first.uid && pos !== "over") { e.setValid(false); } } ```

Original source