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

Items Drag-and-drop

4  Psychosocial

Slipknot
All Hope Is Gone 2008

2  Dam That River

Alice in Chains
Dirt 1992

2  Show Me How To Live

AudioSlave
AudioSlave 2002

1  Enter Sandman

Metallica
Metallica 1991

 Moonlight Sonata

Beethoven

 Ave Maria

Gounod

 Turkish March

Mozart

3  One on One

Wayman Tisdale
1999

1  All Or Nothing At All

Kurt Elling
2007

1  The Message

Grandmaster Flash & The Furious 5
1996

5  Planet Rock

Afrika Bambataa
1997

4  Fireflies

Owl City
2005

3  Love Story

Taylor Swift
2000

3  Use Somebody

Kings of Leon
2009

With RadListView you can easily implement Drag & Drop functionality for your data items. To enable Item Drag & Drop in RadListView:

  1. Set RadListView.ClientSettings.AllowItemsDragDrop="true".
  2. Add a RadListViewItemDragHandle control to your ItemTemplate / AlternatingItemTemplate.
  3. Add a CSS marker on a data item container element (.rlvI for ItemTemplate, .rlvA for AlternatingItemTemplate)

On the server, RadListView fires the ItemDrop event you can handle. argument of type RadListViewItemDragDropEventArgs exposes the DraggedItem and DestinationHtmlElement properties. The former references the RadListViewDataItem that has been dropped, while the latter is the client ID of the target HTML element, if any.

On the client-side, RadListView provides 4 client events you can use:

  • OnItemDragStarted - Fired when an item is about to be dragged (cancellable)
  • OnItemDragging - Fired when an item is dragged (on mouse move)
  • OnItemDropping - Fired when an item is dropping on a target element (cancellable)
  • OnItemDropped - Fired after OnItemDropping, before RadListView postbacks

In the example, the client-side OnRowDropping event is used to cancel the postback if the track is dropped outside of the category links.

Drag a track to the right and drop over a category to organize.
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • scripts.js
  • styles.css
<%@ Page Language="vb" Inherits="Telerik.ListViewExamplesVBNET.ItemDragDrop.DefaultVB"CodeFile="DefaultVB.aspx.vb"  %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" type="text/css" rel="Stylesheet" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <telerik:RadCodeBlock ID="RadCodeBlock1" runat="server">
        <script type="text/javascript">
            var resultsPanel;
            Sys.Application.add_load(function myfunction() {
                resultsPanel = $get("<%= ResultsPanel.ClientID %>");
            })
        </script>
    </telerik:RadCodeBlock>
    <script src="scripts.js" type="text/javascript"></script>
    <telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel1" runat="server">
    </telerik:RadAjaxLoadingPanel>
    <div class="demo-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server" LoadingPanelID="RadAjaxLoadingPanel1">
            <div id="trackContainer">
                <telerik:RadListView ID="RadListView1" runat="server" RenderMode="Lightweight" OnNeedDataSource="RadListView1_NeedDataSource" Skin="Silk"
                    OnItemDrop="RadListView1_ItemDrop" ItemPlaceholderID="TrackContainer" DataKeyNames="TrackID, Title, Artist"
                    ClientDataKeyNames="TrackID, Title, Artist">
                    <ClientSettings AllowItemsDragDrop="true">
                        <ClientEvents OnItemDragStarted="itemDragStarted" OnItemDragging="itemDragging" OnItemDropping="trackDropping"></ClientEvents>
                    </ClientSettings>
                    <LayoutTemplate>
                        <div class="RadListView RadListView_Silk">
                            <asp:PlaceHolder ID="TrackContainer" runat="server"></asp:PlaceHolder>
                        </div>
                    </LayoutTemplate>
                    <ItemTemplate>
                        <div class="track rlvI">
                            <telerik:RadListViewItemDragHandle ID="RadListViewItemDragHandle1" runat="server"
                                ToolTip="Drag to organize"></telerik:RadListViewItemDragHandle>
                            <div class="info">
                                <h3>
                                    <%# If(CType(Eval("TrackNumber"), Integer) > 0, Eval("TrackNumber"), "")%>
                                &nbsp;<%# Eval("Title") %></h3>
                                <div class="artist">
                                    <%# Server.HtmlEncode(Eval("Artist").ToString()) %>
                                </div>
                                <div class="album">
                                    <%# Eval("Album") %>
                                    <%# If(CType(Eval("Year"), Integer) > 0, Eval("Year"), "")%>
                                </div>
                            </div>
                        </div>
                    </ItemTemplate>
                    <EmptyDataTemplate>
                        <div class="noTracks">
                            No tracks in this section
                        </div>
                    </EmptyDataTemplate>
                </telerik:RadListView>
            </div>
            <div id="genreContainer">
                <asp:Repeater ID="GenresRepeater" runat="server" OnItemCommand="GenresRepeater_ItemCommand"
                    OnPreRender="GenresRepeater_PreRender">
                    <ItemTemplate>
                        <asp:LinkButton ID="GenreLink" runat="server" CommandName="ShowTracks" CommandArgument='<%# Eval("Key") %>'
                            onmouseover='this.className += " selected";' onmouseleave='this.className = this.className.split(" selected").join("");'>
                            <%# If(Eval("Key").ToString() = "","Unsorted", Eval("Key")) %>&nbsp;
                            (<%# Eval("Value") %> items)
                        </asp:LinkButton>
                    </ItemTemplate>
                </asp:Repeater>
            </div>
            <div class="clearFix">
            </div>
            <asp:Panel ID="ResultsPanel" runat="server" CssClass="result">
            </asp:Panel>
        </telerik:RadAjaxPanel>
    </div>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance