Drag and Drop between TreeLists

[bman]

How do I drag and drop between two TreeLists?

[Pavlina]

Hello,

The demo below shows how you can drag and drop items in the current view where editable.move option is used:
http://demos.telerik.com/aspnet-mvc/treelist/dragdrop

However, if you want to drag and drop between treelists then you can use drag and drop events of the control. More information how to use them is available here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-drag

Regards,
Pavlina
Telerik

[bman]

Pavlina,

Thank you for responding.
I’m unclear about your response. Given the example below.
If “Wooten Guy” is dragged to “Daryl Sweeney”, how does Telerik\Kendo provide any information about the destination tree? The console displays “undefiined” for e.destination.

Thanks,
Brian

Example:

    <div id="treeList1"></div>
    <script>
$("#treeList1").kendoTreeList({
  columns: [
    { field: "Name" },
    { field: "Position" }
  ],
  editable: {
    move: true
  },
  dataSource: [
    { id: 1, Name: "Daryl Sweeney", Position: "CEO 1", parentId: null },
    { id: 2, Name: "Guy Wooten", Position: "Chief Technical Officer 1", parentId: 1 }
  ],
  drop: function(e) {
    console.log("drop", e.source, e.destination, e.valid);
  }
});
    </script>


    <div id="treeList2"></div>
    <script>
$("#treeList2").kendoTreeList({
  columns: [
    { field: "Name" },
    { field: "Position" }
  ],
  editable: {
    move: true
  },
  dataSource: [
    { id: 3, Name: "Sweeney Daryl", Position: "CEO 2", parentId: null },
    { id: 4, Name: "Wooten Guy", Position: "Chief Technical Officer 2", parentId: 3 }
  ],
  drop: function(e) {
    console.log("drop", e.source, e.destination, e.valid);
  }
});
    </script>


From: [e-mail] [mailto:[e-mail]]
Sent: Friday, May 13, 2016 6:35 AM
Subject: Telerik forums - new post is submitted

New post in Drag and Drop between TreeLists

Pavlina


5/13/2016 10:34:10 AM
Hello,

The demo below shows how you can drag and drop items in the current view where editable.move option is used:
http://demos.telerik.com/aspnet-mvc/treelist/dragdrop

However, if you want to drag and drop between treelists then you can use drag and drop events of the control. More information how to use them is available here:
http://docs.telerik.com/kendo-ui/api/javascript/ui/treelist#events-drag

Regards,
Pavlina
Telerik

[Alex Gyoshev]

Hello bman,

The TreeList provides information about the DOM element that was hovered, via the dropTarget field of the event arguments of the drop event. You can use it to determine whether the drop event has occurred over a valid row:

  drop: function(e) {
    var target = $(e.dropTarget).closest(".k-treelist tr");
    if (target.length) {
      e.preventDefault() // successful drop over custom container
      // insert row in target treelist row
    }
  }

Regards,
Alex Gyoshev
Telerik