Drag and Drop between TreeLists

4 posts, 0 answers
  1. bman
    bman avatar
    6 posts
    Member since:
    May 2007

    Posted 12 May Link to this post

    How do I drag and drop between two TreeLists?
  2. Pavlina
    Admin
    Pavlina avatar
    6084 posts

    Posted 13 May Link to this post

    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
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. bman
    bman avatar
    6 posts
    Member since:
    May 2007

    Posted 13 May Link to this post

    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


  5. Alex Gyoshev
    Admin
    Alex Gyoshev avatar
    2500 posts

    Posted 17 May Link to this post

    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
Back to Top
UI for ASP.NET MVC is VS 2017 Ready