ListView - 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)
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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.
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • scripts.js
  • styles.css
<%@ Page Language="c#" Inherits="Telerik.ListViewExamplesCSharp.ItemDragDrop.DefaultCS"CodeFile="DefaultCS.aspx.cs"  %>

<%@ Register TagPrefix="sds" Namespace="Telerik.Web.SessionDS" %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>
                                    <%# (int)Eval("TrackNumber") > 0 ? Eval("TrackNumber") : "" %>
                                &nbsp;<%# Eval("Title") %></h3>
                                <div class="artist">
                                    <%# Server.HtmlEncode(Eval("Artist").ToString()) %>
                                </div>
                                <div class="album">
                                    <%# Eval("Album") %>
                                    <%# (int)Eval("Year") > 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";' onmouseout='this.className = this.className.split(" selected").join("");'>
                            <%# 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>

Find Assistance

Help Us Improve

Was this example helpful?