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