Preventing node drop where it is not under another node.

[Nga]

Hi,

please find attached a small sample I have prepared.
If you run the html file in firefox and view the developer console (F12).
You will see i am outputting on the drag event. - console.log("Drag", e.sourceNode, "over", e.dropTarget);
this console output is the example i found in the documentation.

So when you run this and you drag the "Sofa" to be above "Furniture" - so that it is not under any other node. the e.dropTarget still seems to be Furniture?
I am trying to prevent a node from being dropped if it is not under any other node. ...
How would I do this?

[Dimo]

Hello Nga,

The TreeView nodes occupy a little more space than the visible text. This is probably why it looks like the dragged node is above "Furniture", but the code reports that it is over it. If you drag a little higher, everything will get back to normal.

Preventing node drops conditionally is achieved by using the setValid() method in the drop event.

http://docs.telerik.com/kendo-ui/api/web/treeview#events-drop

You can also indicate the current status to the user with the setStatusClass() method in the drag event.

http://docs.telerik.com/kendo-ui/api/web/treeview#events-drag

Regards,
Dimo
Telerik

 

 

[Nga]

Hi,

Thanks for the response, I have already used the drag event to prevent some rules, but I can't get the final check right.

If you open up the html file in the zip file from the original post.

the tree structure is as follows:


Furniture
-- Tables & Chairs
-- Sofas
-- Occasional Furniture
Decor
-- Bed Linen
-- Curtains & Blinds
-- Carpets
Storage



So Furniture, Decor, Storage are the main (top level) nodes.
How do i prevent the user from Dragging and dropping "Bed Linen" above furniture ... I don't want "Bed Linen" to become a top level node ???

[Dimo]

Hello Nga,

Achieving the desired behavior requires general logic and standard DOM traversal techniques. You need to find out where is e.sourceNode located in the TreeView sctructure - if its DOM element is not at the root level, but the destination element is a root item, then prevent dropping.

https://api.jquery.com/category/traversing/tree-traversal/

http://docs.telerik.com/kendo-ui/getting-started/widgets#accessing-kendo-ui-widget-elements

Regards,
Dimo
Telerik