Telerik blogs

With the 2010.Q1 release, RadListView for ASP.NET AJAX is getting a fancy new client capability. You will be able to drag list view items around and drop them on other HTML elements, similar to RadGrid's row drag & drop functionality.

Item Drag and Drop

Setting up RadListView to enable items drag & drop will be a piece of cake. Besides the usual AllowSomeFunctionality-type of property, all you will need to do will be:

  • Use a CSS marker on an HTML element in the ItemTemplate / AlternatingItemTemplate to mark the bounds of a list view item. The content inside your HTML container marked by this CSS marker will be duplicated into the dragged item.
  • Put a small handle control somewhere in your ItemTemplate / AlternatingItemTemplate. You will be able to initiate item drag by grabbing this handle.

Similarly to RadGrid's RowDrop event, RadListView will fire the server-side ItemDrop event that you can use to get the dragged item, as well as the destination HTML element's client ID.

On the client side, RadListView will expose a couple of client events spanning the life cycle of an item drag action - from drag start to after dropping. These events will give you full control over the drag action - getting and modifying the dragged item and its key values, cancelling an action, preventing postback, etc.

Items Drag and Drop for RadListView will be available in the upcoming 2010.Q1 beta version. Give it a try and let us know what you think about it. Any feedback is more than welcome.

About the Author

Iana Tsolova

is Product Manager at Telerik’s DevTools division. She joined the company back in the beginning of 2008 as a Support Officer and has since occupied various positions at Telerik, including Senior Support Officer, Team Lead at one of the ASP.NET AJAX teams and Technical Support Director. Iana’s main interests are web development, reading articles related to geography, wild nature and latest renewable energy technologies.


Comments are disabled in preview mode.