dragstart

(Available as of the 2015.3.1014 release) Fires when the user attempts to drag an item. If prevented, the item is not allowed to move. The event handler function context (available through the this keyword) will be set to the widget instance.

e.source kendo.data.TreeListModel

The model of the source row.

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

Example - subscribing to the dragstart event after initialization

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

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

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