Kendo UI TreeView Drag and Drop get the destination (dropped) treeview object

Question

I have two TreeViews structure with drag and drop functionality. The nodes from both the Treeviews can be dragged and dropped on one another.

If I am dragging some content from source to destination i want updated list of destination in console

For reference you can check link here.

In this DEMO I can move something from one category to another but I want to capture the updated list of category containing all the subcategory.

Here is the snippet of my code

<div id="example">
        <div class="demo-section k-content">
            <h4>Treeview One</h4>
            <div id="treeview-left"></div>
            <h4 style="padding-top: 2em;">Treeview Two</h4>
            <div id="treeview-right"></div>
        </div>

        <script>
            $("#treeview-left").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Furniture", expanded: true, items: [
                        { text: "Tables & Chairs" },
                        { text: "Sofas" },
                        { text: "Occasional Furniture" }
                    ] },
                    { text: "Decor", items: [
                        { text: "Bed Linen" },
                        { text: "Curtains & Blinds" },
                        { text: "Carpets" }
                    ] }
                ]
            });

            $("#treeview-right").kendoTreeView({
                dragAndDrop: true,
                dataSource: [
                    { text: "Storage", expanded: true, items: [
                        { text: "Wall Shelving" },
                        { text: "Floor Shelving" },
                        { text: "Kids Storage" }
                    ]
                    },
                    { text: "Lights", items: [
                        { text: "Ceiling" },
                        { text: "Table" },
                        { text: "Floor" }
                    ]
                    }
                ]
            });
        </script>

how can I achieve this? Thank you

Answer 1

I have created a JsFiddle DEMO here.

You will need to bind the dragend event of both of your Treeviews to a function and then you can get the destination Treeview list from there. Here is the snippet from the DEMO:

function tree_dragend(e) {
  alert("See your console");
  console.log("Drag end sourceNode = ", e.sourceNode, "dropPosition = ", e.dropPosition, "destinationNode = ", e.destinationNode);

  var destinationTreeviewDOMElement = $( e.destinationNode ).closest( "div.k-treeview" );
  console.log("destinationTreeviewDOMElement = ", destinationTreeviewDOMElement);

  var destinationTreeview = $(destinationTreeviewDOMElement).data("kendoTreeView");
  console.log("destinationTreeview = ", destinationTreeview);

  console.log("destinationTreeviewData = ", destinationTreeview.dataSource.data());
}

var treeview_left = $("#treeview-left").data("kendoTreeView");
var treeview_right = $("#treeview-right").data("kendoTreeView");

treeview_left.bind("dragend", tree_dragend);
treeview_right.bind("dragend", tree_dragend);