New to Telerik UI for ASP.NET Core? Download free 30-day trial

ASP.NET Core TreeList Drag and Drop

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Edit in Telerik REPL
HtmlHelper
TagHelper
Files:
dragdrop.cshtml
DragDropController.cs
EmployeeDirectoryController.cs
EmployeeDirectoryModel.cs
dragdrop_TagHelper.cshtml

Also available for:

CLIENT-SIDE API HTML HELPER API

Description

Telerik UI for ASP.NET Core supports the drag-and-drop feature for many of its components. Depending on the specific component and scenario, dragging and dropping enable you to perform various operations in a fast and efficient way by dragging an element to a dropzone. For example, you can reorder rows inside and outside a table, implement the editing functionality in a component, or reorder tree nodes.

Whatever dragging and dropping target as a scenario, the drag-and-drop feature of the Telerik UI for ASP.NET Core components is based and built upon on the Kendo UI for jQuery Drag and Drop approach. The Drag and Drop combines the kendoDraggable and kendoDropTarget controls, whose capabilities seamlessly integrate with the whole suite components.

The Telerik UI for ASP.NET Core TreeList supports editing by dragging and dropping. When the Editable.Move property is set to true, the user can drag and drop the rows and, as a result, the TreeList updates the parentId field internally.

As demonstrated in this example, setting the Editable.Move.Reorderable property to true enables the nodes of the TreeList to be dragged and dropped across all levels, also allowing the child nodes to change their order within the same parent scope.

Additional Apps

This TreeList example is part of unique collection of hundreds of ASP.NET Core demos, with which you can see all Telerik ASP.NET Core components and their features in action. View the source code of the demos from the library or directly adapt, and edit them and their theme appearance in Telerik REPL for ASP.NET Core or ThemeBuilder.

Support & Learning Resources

Additional Resources