Edit this page

dragstart

Fired when the user attempts to drag an item. If prevented, the item is not allowed to move.

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.

e.source kendo.data.TreeListModel

The model of the source row.

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

Example - subscribe to the "dragstart" event after initialization

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

  function dragstart(e) {
    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>
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy