drop

Fired when the user drops an item. If prevented, the source row will not be moved.

The event handler function context (available via the this keyword) will be set to the widget instance.

Available in builds 2015.3.1014 and later.

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 that the node is placed over.

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, indicating 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. e.preventDefault() simply removes the clue, as if it has been dropped. As a general rule, use preventDefault to manually handle the drag&drop operation, and setValid(false) to indicate unsuccessful drag&drops.

Example - subscribe 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) {
      console.log("drop", e.source, e.destination, e.valid);
    }
  });
</script>

Example - subscribe to the "drop" event after initialization

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

  function drop(e) {
    debugger
    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>
In this article
Not finding the help you need?