Editing by Dragging and Dropping

Currently, the dragging and dropping of items (.Editable(editable=>editable.Move(true))) is not supported with the incell edit mode of the TreeList because the draggable functionality prevents the mousedown event. As a result, the change event of the editor input does not fire, which in turn prevents the MVVM binding from saving the updated value. To work around this problem, refer to this GitHub issue.

When the .Editable(editable=>editable.Move(true)) option is set to true, the user can drag and drop the rows and the TreeList internally updates the ParentId field. To persist the new hierarchy, configure the TreeList data source for CRUD operations and set transport.update as a bare minimum. For a runnable example, refer to the demo on editing by dragging and dropping the rows of the TreeList.

    @(Html.Kendo().TreeList<EmployeeViewModel>()
        .Name("treelist")
        .Toolbar(t=>t.Save()) /* to batch save the new hierarchy */
        .DataSource(dataSource => dataSource
            .Batch(true) /* enable batch operations */
            .Read(read => read.Action("Employees_Read", "TreeList"))
            .Update(update => update.Action("Employees_Update", "TreeList"))
            .Model(m =>
            {
                m.Id(f => f.OrderID);
                m.ParentId(f => f.ParentOrderID).Nullable(true);
                m.Expanded(true);
            })
        )
        /* other TreeList settings */
    )
    // The TreeList sends the updated items with prefix "models".
  // Remember to bind it in the controller so that the collection can be intercepted.
    public JsonResult Update([DataSourceRequest] DataSourceRequest request, [Bind(Prefix = "models")]IEnumerable<EmployeeDirectoryModel> employees).
    {
        if (ModelState.IsValid)
        {
            foreach (var employee in employees)
            {
                employeeDirectory.Update(employee, ModelState);
            }
        }

        return Json(employees.ToTreeDataSourceResult(request, ModelState));
    }

See Also

In this article
Not finding the help you need? Improve this article