Drag item from List/Sortable to drop into Treeview

[akhila]

I have 10 items as a string array displaying using Kendo UI sortable and I have  one treeView. I want to do drag and drop from that list to this treeview. As and when I drop item from list to treeview it should ask me to enter name of that node.(means node should be editable.)

EX: I have a list of items like site, building

And I have a treeview of many sites and building under different site. As and when I drag and drop building from list to treeview(under any site),it should as me to enter the name of building.

 

Please provide solution for the above scenario.

[Martin Bechev]

Hello Akhila,

I understand what the requirement is, but I am afraid that there isn't such built-in drag and drop functionality out of the box between different components.

The following article, however, demonstrates how nodes from TreeView can be dropped inside a second TreeView:

https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop/#toc-multiple-treeviews

In order to render the TreeView nodes as a list, the developer can remove the kendoTreeViewExpandable directive from the second TreeView. That will remove the expanding functionality together with the UI icon arrows. Also bound The TreeView to flat data to prevent the creation of hierarchy nodes:

https://www.telerik.com/kendo-angular-ui/components/treeview/data-binding/#toc-flat-data

From here when dragging from the first TreeView component to the second, the developer should check if the item is being dropped over a parent and if so, the nodeDrop event should be prevented. To check if the node is being dropped over a parent, the developer can utilize the nodeDrag event to check if the node is over a span element with class "k-treeview-leaf-text" and set a flag that can be used in a condition.
Additionally, kendoTreeViewDragClueTemplate can be used to inform the user that the item cannot be dropped over the parent. 

https://www.telerik.com/kendo-angular-ui/components/treeview/drag-and-drop/#toc-templates

Here is an example that demonstrates the suggestion:

https://stackblitz.com/edit/angular-zgj1je-1za2mh

Please keep in mind that the purpose of the example is to steer you in the right direction. The demo is based on a custom implementation. Thus it isn't fully tested and some further modifications may be required to adjust it to suit the specific use-case scenario requirements. 

Generally, such custom implementation falls outside our customer support service. We always aim to provide the best possible support but there is a certain extent, to which further specific implementation and customizations are considered developer efforts.

Regards 

Martin
Progress Telerik