New to Kendo UI for jQuery? Start a free 30-day trial

Dragstart

events

(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.

dragstart

e.source `kendo.data.TreeListModel`

The model of the source row.

<div id="treelist"></div>
<script>
  var service = "https://demos.telerik.com/service/v2/core";

  $("#treelist").kendoTreeList({
    dataSource: {
      transport: {
        read: {
          url: service + "/EmployeeDirectory/All"
        }
      },
      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>

<div id="treeList"></div>
<script>
  var service = "https://demos.telerik.com/service/v2/core";

  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"
        }
      },
      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>

Dragstart

dragstart

e.source kendo.data.TreeListModel

e.source `kendo.data.TreeListModel`