This is a migrated thread and some comments may be shown as answers.

Drag and Drop between TreeLists

3 Answers 125 Views
TreeList
This is a migrated thread and some comments may be shown as answers.
bman
Top achievements
Rank 1
bman asked on 12 May 2016, 03:31 PM
How do I drag and drop between two TreeLists?

3 Answers, 1 is accepted

Sort by
0
Pavlina
Telerik team
answered on 13 May 2016, 10:34 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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
0
bman
Top achievements
Rank 1
answered on 13 May 2016, 03:38 PM

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: clientservice@telerik.com [mailto:clientservice@telerik.com]
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


0
Alex Gyoshev
Telerik team
answered on 17 May 2016, 02:25 PM

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
Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
Tags
TreeList
Asked by
bman
Top achievements
Rank 1
Answers by
Pavlina
Telerik team
bman
Top achievements
Rank 1
Alex Gyoshev
Telerik team
Share this question
or