Edit this page

Show Confirmation in TreeList When Doing Drag-and-Drop


Product Progress Kendo UI TreeList
Product Version 2016.3.1026


How can I add a dialog confirmation to the TreeList on dragging a row and prevent the transfer of the row if the user selects Cancel?


The dialog confirmation is an asynchronous action. To add it during the drag-and-drop, prevent the drop action so it does not complete while you wait for a confirmation from the user. When the user confirms the drag action, manually change the parent id of the dragged element to move it under the new parent.

  1. Handle the drop event and call e.preventDefault().
  2. Show a confirmation dialog.
  3. In the confirmation callback function, change the parent id value of the dragged row to the id value of the destination row.
    <div id="example">
      <div id="treelist"></div>

      <script id="photo-template" type="text/x-kendo-template">
               <div class='employee-photo'
                    style='background-image: url(../content/web/treelist/people/#:data.EmployeeID#.jpg);'></div>
               <div class='employee-name'>#: FirstName #</div>

        var service = "https://demos.telerik.com/kendo-ui/service";

          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: 280,
             template: $("#photo-template").html() },
            { field: "LastName", title: "Last Name", width: 160 },
            { field: "Position" }
          drop: function(e){
              kendo.confirm("Are you sure that you want to move "+ e.source.FirstName
                            + " under " + e.destination.FirstName + "?").then(function () {
                e.source.set("ReportsTo", e.destination.EmployeeID);

        .employee-photo {
          display: inline-block;
          width: 32px;
          height: 32px;
          border-radius: 50%;
          background-size: 32px 35px;
          background-position: center center;
          vertical-align: middle;
          line-height: 32px;
          box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
          margin-left: 5px;

        .employee-name {
          display: inline-block;
          vertical-align: middle;
          line-height: 32px;
          padding-left: 3px;
Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article