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

Drag & Drop

Loading Demo...
  • EXAMPLE
  • VIEW SOURCE
  • EDIT IN TELERIK REPL
  • Change Theme
    default

    Themes & Swatches

    SASS
    LESS
    Launch Theme Builder
    Default Theme
    • Main
    • Main Dark
    • Nordic
    • Ocean Blue
    • Purple
    • Turquoise
    Bootstrap Theme
    • Main
    • Main Dark
    • Nordic
    • Urban
    • Vintage
    Material Theme
    • Main
    • Arctic
    • Lime Dark
    • Main Dark
    • Nova
    Classic Theme
    • Main
    • Main Dark
    • Opal
    • Silver
HtmlHelper
TagHelper
Files:
drag_drop.cshtml
Drag_DropController.cs
ProductService.cs
ProductViewModel.cs
Drag_Drop_TagHelper.cshtml

Also available for:

CLIENT-SIDE API SERVER-SIDE API

Description

This example shows how to enable the Drag and Drop functionality of the Telerik UI for ASP.NET Core Grid.

All you have to do is:

  • Set the reorderable configuration of the rows: .Reorderable(reorder => reorder.Rows(true))
  • Add a draghandle to a specified column to reorder the rows by dragging: .Draggable(true)

You can also use the `RowReorder` event the Grid to handle the drag and drop operations and modify the data source as per your business logic (for example, to move rows between grids).

Additionally, you can enable the `Navigatable()` option and reoderer the rows by using Ctrl + Up/Down.

More about the Telerik Grid for ASP.NET Core

Support & Learning Resources