Dragging and Dropping

The TreeList enables you to allow the rearranging of its records through dragging and dropping.

To enable the drag-and-drop functionality, use the :editable-move property.

<div id="vueapp" class="vue-app">
    <kendo-treelistdatasource ref="remoteDataSource"
                              :transport-read-url="'https://demos.telerik.com/kendo-ui/service/EmployeeDirectory/All'"
                              :transport-read-data-type="'jsonp'"
                              :schema-model="model">
    </kendo-treelistdatasource>

    <kendo-treelist data-source-ref="remoteDataSource"
                    :height="'440px'"
                    :editable-move="true">
        <kendo-treelist-column :field="'FirstName'" :title="'First Name'" :width="280"></kendo-treelist-column>
        <kendo-treelist-column :field="'LastName'" :title="'Last Name'" :width="160"></kendo-treelist-column>
        <kendo-treelist-column :field="'Position'" ></kendo-treelist-column>
    </kendo-treelist>
</div>
Vue.use(TreeListInstaller);
Vue.use(DataSourceInstaller);

new Vue({
    el: "#vueapp",
        data: {
            model: {
                id: "EmployeeID",
                parentId: "ReportsTo",
                fields: {
                    ReportsTo: { field: "ReportsTo",  nullable: true },
                    EmployeeID: { field: "EmployeeId", type: "number" },
                    Extension: { field: "Extension", type: "number" }
                },
                expanded: true
            }
    }
})

In this article