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

Editable.move

configuration

Enables the drag-and-drop UI of rows between parents.

editable.move

Boolean|Object

Default: false

  <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" }
      ]
    });
  </script>

If set to true (default), when there is a drag column for the items in the TreeList, the user will be allowed to reorder rows via click move click interaction as an alternative of the drag and drop one.

Default: true

  <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: {
          reorderable: true,
          clickMoveClick: false
        }
      },
      columns: [
        { draggable: true, width: "40px" },
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" }
      ]
    });
  </script>

editable.move.reorderable

Boolean

Enables reordering of rows via a drag-and-drop UI.

Default: false

  <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: {
          reorderable: true
        }
      },
      columns: [
        { field: "FirstName", title: "First Name", width: 220 },
        { field: "LastName", title: "Last Name", width: 160 },
        { field: "Position" }
      ]
    });
  </script>

Editable.move

editable.move

editable.move.clickMoveClick

editable.move.reorderable