Telerik Extensions for ASP.NET MVC

Version Q1 2012, released 04/19/2012

Drag & Drop

Reorder nodes

  • imageAndrew Fuller
    • imageNancy Davolio
    • imageJanet Leverling
    • imageMargaret Peacock
    • imageSteven Buchanan
      • imageMichael Suyama
      • imageRobert King
      • imageAnne Dodsworth
    • imageLaura Callahan

Team Bravo

Team Charlie

About this example ASPXRazor

This example shows the drag&drop capabilities of Telerik TreeView for ASP.NET MVC.

To allow reordering of the TreeView nodes, all you need to do is to call DragAndDrop(true).

If you want to process any user action (i.e. so that you save it to a database), you have to attach handlers to the drag&drop client-side events, namely:

  • OnNodeDragStart (cancellable) - raised when an attempt to drag a node has been made. Used to deny dragging of nodes.
  • OnNodeDragging - raised while the user drags a node. Used for providing clues whether the drag will be successful, thus enhancing user experience.
  • OnNodeDrop (cancellable) - raised when a node is dropped. Used for processing of the drop result.
  • OnNodeDropped - raised when a node has been dropped on the treeview. Used when saving the treeview state.
  • OnNodeDragCancelled - raised when the user cancels a drag by hitting the Esc key. Used for cleaning up any artifacts from the dragging.

You can provide contextual drag clues with less code by providing a CSS selector to the DropTargets property, like this:

<%= Html.Telerik().TreeView()
        .Name("TreeView")
        .DragAndDrop(settings => settings
            .DropTargets(".drop-container")
        )
        .Items(items => { /*items definition*/ })
%>

Get more than expected!

Take the Telerik Extensions for ASP.NET MVC to your Visual Studio projects to truly experience their power. Download your free copy now and jumpstart your development with the available learning resources.

The Extensions are offered in both open source and commercial versions the differences between which are well explained in the licensing FAQ.

If you have any questions, do not hesitate to contact us at sales@telerik.com.

Other Demos: