drop

(Available as of the 2015.3.1014 release) Fires when the user drops an item. If prevented, the source row will not be moved. The event handler function context (available through the this keyword) will be set to the widget instance.

Event Data

e.source kendo.data.TreeListModel

The model of the source row.

e.destination kendo.data.TreeListModel

The model of the new parent row.

e.dropTarget Element

The element over which the node is placed.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

e.valid Boolean

Indicates whether the drag operation is successful.

e.setValid Boolean

Sets the valid state. If set to false, the row will be animated back to its origin and will indicate to the user that the operation was invalid.

The difference between e.setValid(false) and e.preventDefault()

Both operations cancel the default drag operation but the indication to the user is different.

• e.setValid(false) indicates that the operation was unsuccessful by animating the drag clue to its original position. Use setValid(false) to indicate unsuccessful drag-and-drop operations.
• e.preventDefault() only removes the clue as if it was dropped. Use preventDefault to manually handle the drag-and-drop operation.

Example - subscribing to the drop event before initialization

<div id="treelist"></div>
<script>
  var service = "https://demos.telerik.com/kendo-ui/service";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: true
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ],
    drop: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("drop", e.source, e.destination, e.valid);
    }
  });
</script>

Example - subscribing to the drop event after initialization

<div id="treeList"></div>
<script>
  var service = "https://demos.telerik.com/kendo-ui/service";

  function drop(e) {
    debugger
/* The result can be observed in the DevTools(F12) console of the browser. */
    console.log("row dropped");
  }

  $("#treeList").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All",
          dataType: "jsonp"
        }
      },
      schema: {
        model: {
          id: "EmployeeID",
          parentId: "ReportsTo",
          fields: {
            ReportsTo: { field: "ReportsTo",  nullable: true },
            EmployeeID: { field: "EmployeeId", type: "number" },
            Extension: { field: "Extension", type: "number" }
          },
          expanded: true
        }
      }
    },
    height: 540,
    editable: {
      move: true
    },
    columns: [
      { field: "FirstName", title: "First Name", width: 220 },
      { field: "LastName", title: "Last Name", width: 160 },
      { field: "Position" }
    ]
  });

  var treeList = $("#treeList").data("kendoTreeList");
  treeList.bind("drop", drop);
</script>