Rank 1
Iron
The basic question:
Is it possible to intercept drops with DropPosition.Before or DropPosition.After, and change them to DropPosition.Over?
Do I need to handle this using a custom edit service? If so, is there an example of setting one up that I can refer to? I'm of course not looking for something already written to achieve exactly what I'm trying to do, but I'm having trouble finding even a basic example of using one with the treeview component, so I don't know where to begin.
Background on why I'm looking for this:
I have a drag and drop tree view in which I'm trying to maintain 1 level of hierarchy. This is one level of folder nodes, each of which can contain file nodes which can be dragged and dropped between folder nodes. File nodes cannot have children, and a folder node cannot be a child of another folder node.
I've been able to achieve this by checking the drop event and setting it to invalid unless the DropPosition is equal to Over, but this severely limits where the user can drop a node.
I'm currently preventing dropping one file node onto another file node, because the default behavior would make the dropped node the child of the target node. Ideally, I'd like to instead allow the drop, but make the dropped node become a child of the target node's parent folder node, so a sibling of the file node it was dropped on.
I'm also preventing dropping a file node at the top or bottom edge of a folder node because Kendo reads this DropPosition as Before or After. By default, this places the dropped file node at the same hierarchy level as the folder node it was dropped on. Ideally, I'd like to change the Before and After positions to Over, so that the file node becomes a child of that folder rather than moving beside it.
I've implemented logic for some of this in (addItem) and (removeItem) handler methods on the component, and while they do handle the data correctly in the background, they seem to have no effect on what Kendo is doing visually in the template until the page is refreshed.
It turned out I didn't need a custom edit service. I just had to remove the kendoTreeViewDragAndDropEditing directive, and tweak the code linked to the (addItem) and (removeItem) events.
It would still be nice to see an example of how to use your own edit service though, for future.
Hello,
I am happy to hear that you have managed to implement the desired functionality.
In general, the built-in kendoTreeViewDragAndDrop directive allows items to be dragged and triggers the corresponding events. It is important to mention that this directive does not make any changes to the nodes' order and the reason behind this is the fact that the TreeView does not manage its own data. This means that the developer could handle the corresponding events and implement the drag-and-drop functionality according to the case-specific requirements.
An alternative approach that could be used is the kendoTreeViewDragAndDropEditing. This directive could be used with either of the built-in DataBinding directives which would set their own edit handlers or the developer could provide an editService which would subscribe and call addItem and removeItem handlers when the corresponding events are triggered by the component.
For further reference, please check out the following article:
https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop/#toc-built-in-editing-directive
Furthermore, the built-in behavior of the TreeView's drag-and-drop functionality implies that each node is separated into three parts throughout the dragging action - when its upper part is hovered, the drop position is before, when its middle part is hovered - over, and when the bottom part - after.
In order to achieve the desired behavior of having over as the single drop position, the developer would need some custom logic which could be implemented by utilizing the kendoTreeViewDragAndDrop and handling the corresponding events.
I hope the provided information helps. Please, let me know if I can further assist you with this case.
Regards,Georgi
Progress Telerik