Kendo TreeView Move Parent nodes to change the Sort Order but not allow a Parent to be dragged under a Child node

I have Kendo TreeView in which parent nodes have children nodes.

Rules that I want are that a user can

  1. Drag parent node above or below the current position , thus change the sort order
  2. Not allow a parent to be dragged onto another parent node
  3. Not allow a parent to be dragged onto any child node
  4. DO allow a child node item to be dragged under another parent node

I certainly prefer javascript or jquery

This code simply prevents all parent nodes from being dragged and thus it is not want I am wanting. Anyone have any samples on this?

 $(".k-treeview").data("kendoTreeView").bind("dragstart", function (e) {
    if ($(e.sourceNode).parentsUntil(".k-treeview", ".k-item").length == 0) {
       e.preventDefault();
    }
});

UPDATE from answer

Seems that almost all the code it working correcting from the answer if I place it in my $(document).ready(function() { ...

But If I place that code under the onDrop is does not get called up.

e.g.

  var treeview = $("#treeview").kendoTreeView({
                                    expanded: true,
                                    dragAndDrop: true,
                                    select: onSelect,
                                    loadOnDemand: false,
                                    dataSource: homogeneous,
                                    dataTextField: "ReportGroupName",
                                    template: kendo.template($("#treeview-template").html()) //,
                                    ,
                                    onDrop: function(e) {
                                        kendoTreeView = $(".k-treeview").data("kendoTreeView");
                                        kendoTreeView.bind("drag", function (e) {

                                            //Check if we're trying to add the node as a child
                                            var dropAsChild = $(e.dropTarget).hasClass("k-in k-state-hover");

                                            var sourceDataItem = kendoTreeView.dataItem(e.sourceNode);
                                            var destinationDataItem = kendoTreeView.dataItem(e.dropTarget);

                                            if ($(e.sourceNode).is(e.dropTarget)) {
                                                //Dropping on itself
                                                e.setStatusClass("k-denied");
                                            } else if (destinationDataItem && !dropAsChild) {
                                                //Dropping as a sibling... that's ok if it's the same parent
                                                if (sourceDataItem.parent().uid != destinationDataItem.parent().uid) {
                                                    //Not the same parent
                                                    e.setStatusClass("k-denied");
                                                }
                                            } else {
                                                e.setStatusClass("k-denied");
                                            }
                                        });
                                    }

                                }).data("kendoTreeView");

IMAGE
Here is an image red arrow is pointing at child that I was to move to another parent ( to be a child of that parent with blue arrow)

enter image description here

3 thoughts on “Kendo TreeView Move Parent nodes to change the Sort Order but not allow a Parent to be dragged under a Child node”

Leave a Comment