All Components

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

ASP.NET MVC ListBox Drag and Drop

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • Change Theme
    default
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Ocean Blue A11Yaccessibility
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Bootstrap 3
    • Bootstrap 3 Dark
    • Main Dark
    • Nordic
    • Turquoise
    • Turquoise Dark
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Material 2
    • Material 2 Dark
    • Nova
    Classic Theme
    • Main
    • Green
    • Green Dark
    • Lavender
    • Lavender Dark
    • Main Dark
    • Metro
    • Metro Dark
    • Moonlight
    • Opal
    • Opal Dark
    • Silver
    • Silver Dark
    • Uniform
    Fluent Theme
    • Main
drag_and_drop.cshtml
Drag_And_DropController.cs

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

Telerik UI for ASP.NET MVC 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 MVC components is based and built upon on theKendo UI for jQuery Drag and Drop approach. The Drag and Drop combines thekendoDraggable andkendoDropTarget controls, whose capabilities seamlessly integrate with the whole suite components.

TheTelerik UI for ASP.NET MVC ListBox allows you to drag and drop items within a single ListBox (for reordering) or between connected ListBox components (for transfer).

This example demonstrates how to use the Drag and Drop functionality with two ListBoxes and update the underlying data by handling theAdd andRemove events. Both ListBoxes are bound to the sameDataSource, and the changes can be saved through theSave changes button that triggers thesync() method of theDataSource.

Additional Apps

This ListBox example is part of a unique collection of hundreds of ASP.NET MVC demos, with which you can see allTelerik ASP.NET MVC 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 theThemeBuilder.

Support & Learning Resources

Additional Resources