Items Drag and Drop for RadListView for ASP.NET AJAX

Wednesday, February 10, 2010 by ASP.NET AJAX Team | Comments 11

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.

11 Comments

  • Remco Ros 10 Feb
    Can we try this already ? I don't see a beta demo link...
  • Veli 10 Feb
    Version 2010.Q1 Beta is coming very soon, so stay tuned...
  • David 10 Feb
    Wow, just think I just handed coded the same function using jquery last week.  Can not wait to see this, it might fix some problems I am having with my version like less page refresh. 

  • David 10 Feb
    Wow, just think I just handed coded the same function using jquery last week.  Can not wait to see this, it might fix some problems I am having with my version like less page refresh. 

  • I put in this feature request on November 30, 2009.
    Like David, I have been working on this functionality using
    jQuery.  I'm impressed on Telerik's turnaround time on
    this functionality and can't wait to try it out!
  • Along with the ability to drag/drop a ListView item from one ListView to another or some other HTML element, I was wondering if there will be "sortable" functionality within a ListView?

    My needs not only building a ListView from a ListView but to be able to sort the items in the receiving
    ListView. 

    In addition, I'm curious about the elementID that I might be receiving on the drop event.  When
    dropping an item on a ListView that contains items, do I get the elementID of the ListView or the
    element of the item within the ListView that I dropped it on?  Perhaps there could be a property
    to control this.  Sometimes I need to do an append drop.  Sometimes I need to do an insert drop.

    Append Drop:  Drop 4 on ListView 1 2 3  becomes 1 2 3 4
    Insert Drop:  Drop 4 on Item 2 in ListView 1 2 3  becomes  1 4 2 3

    Thanks for Telerik's continued support of the developer community.
  • Veli 15 Feb
    @Dennis
    RadListView already provides built-in sorting. For more information you can refer to the ListView sorting demo.
    As for the ID of the destination element, the HTML element is taken from the event object's target (srcElement for IE) property when you drop the dragged item. So, the element is the innermost in a hierarchy of nested elements. You get its client id (if any) passed to the server-side ItemDrop event argument. Using the client events and the rich client API, however, you can track the parent HTML element you need.
  • Veli -

    Appreciate the update.  Sounds like the new ListView has
    the features I'm looking for.  Can't wait to try it out.
  • Veli 17 Feb
    @Dennis
    Don't have to wait any longer then. Q1 2010 BETA is out!
  • Don 22 Mar
    This Drag and Drop cannot be performed on the source List for simple reorder? I have not seen this capability. Is this posssible?
  • Veli 30 Mar
    @Don:
    Reordering list view items after drag-dop is possible, though not provided automatically. You will have to handle RadListView's ItemDrop event on the server and infer the new position of the dropped item. You can then update the listview's data source with the new order and rebind the listview.

Add comment

  1. Formatting options
       
     
     
     
     
       
  2. (optional, emails won't be shown on public pages)
  3. (optional)