I have Kendo TreeView in which parent nodes have children nodes.
Rules that I want are that a user can
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)
The problem with the dragstart
event is that it won't provide you the drop target as it's to early in the event sequence.
The best way to do achieve this would be to deny the drop action based on the source and destination node. You can do this by calling the setStatusClass
(with a k-denied
) on the event object passed to the drag
event.
var treeview = $("#treeview").kendoTreeView({
expanded: true,
dragAndDrop: true,
select: onSelect,
loadOnDemand: false,
dataSource: homogeneous,
dataTextField: "ReportGroupName",
template: kendo.template($("#treeview-template").html()),
drag: function (e) {
//Check if we're trying to add the node as a child
var kendoTreeView = $("#treeview").data("kendoTreeView");
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");
I can't test the code above right now so they may be some error... I'm sure you'll still understand the logic behind it.