Drag And Drop Outside the Tree

[Sergio]

I implemented the Drag and Drop from a treeNode to an external DIV in this way:
                  /////////////////////////////////////////////////////////////
                  // DRAG A NODE
                  function onDragStart(e) {                   
                  }
                  function onDrag(e) {
                      if (e.dropTarget.id == "dropDiv") {
                          e.setStatusClass("k-add");
                      }
                      else {
                          e.setStatusClass("k-denied");
                      }
                  }
                  function onDrop(e) {
                     // var d = this.dataItem(e.sourceNode);                                                               
                  }
                  function onDragStart(e) {
                  }
                  function onDragEnd(e) {                     
                  }
                  /////////////////////////////////////////////////////////////////
                  //TREE SOURCE DEFINITION
                  treeSource = new kendo.data.HierarchicalDataSource({
                      transport: { read: { url: serviceRoot + "Plant", dataType: "json" }},
                      schema: { model: { id: "idPlant" }   }
                  });
                  /////////////////////////////////////////////////////////////////
                  $("#treePlants").kendoTreeView({
                      dataSource: treeSource,
                      dataTextField: "PlantAlias",
                      dragAndDrop: true,
                     
                      dragstart: onDragStart,
                      drag: onDrag,
                      drop: onDrop,
                      dragend: onDragEnd
                  });

It seems running but when the Node is dragged on the DIV area the "k-add" icon remain attached to cursor... no way to remove it clicking or not the mouse buttons.
Looking at javascript console in Chrome the error: Uncaught TypeError: Cannot read property 'dataSource' of undefined
is shown in kendo.ui.min.js.
How to fix this?


How to proceed.

[Dinusha]

Hi Sergio,

I'm not so sure why you get the error in chrome. however I came across the same issue where I need to drag a tree node and drop it on a div. What I did was there is a method called "remove" in kendoTreeView. Try it and see it will work. Following is a sample code for you.

function onDrop(e) {
var treeView = $("#treePlants").data("kendoTreeView")
if($(e.dropTarget).hasClass('dropToDelete')) {
          treeView.remove($(e.sourceNode));                               
}
}

Probably you have found a solution for this since you've posted it almost a month back.

-Dinusha