dragend

Fired when the user has finished dragging an item and the model has been updated.

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.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribe to the "dragend" 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" }
    ],
    dragend: function(e) {
      console.log("drag ended", e.source, e.destination);
    }
  });
</script>

Example - subscribe to the "dragend" event after initialization

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

  function dragend(e) {
    console.log("drag ended");
  }

  $("#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("dragend", dragend);
</script>
In this article
Not finding the help you need?