drag

(Available as of the 2015.3.1014 release) Fires while the user is dragging and item. This event is triggered on every mouse move. 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.target jQuery

The element under the cursor.

e.sender kendo.ui.TreeList

The widget instance which fired the event.

Example - subscribing to the drag 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" }
    ],
    drag: function(e) {
/* The result can be observed in the DevTools(F12) console of the browser. */
      console.log("dragging", e.source, e.target);
    }
  });
</script>

Example - subscribing to the drag event after initialization

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

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

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