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

Drag-and-drop

  • Argentina
  • Australia
  • Brazil
  • Canada
  • Chile
  • China
  • Egypt
  • England
  • France
  • Germany
  • India
  • Indonesia
  • Kenya
  • Mexico
  • New Zealand
  • South Africa
  • USA

RadListBox fully supports reordering and transferring of Items through drag-and-drop.

You could enable the functionality by first configuring the corresponding RadListBox(es) to allow Reorder and/or Transfer and then setting the EnableDragAndDrop property to true.

In addition to all corresponding events that fire on Reorder/Transfer RadListBox supports a few solely drag-and-drop events.

At the client, these are:

  • DragStart - fires when the drag-and-drop operation starts. Can be canceled.
  • Dragging - fires while an Item is being dragged. Can be canceled.
  • Dropping - fires before the dragged Item is dropped. Can be canceled.
  • Dropped - fires after the dragged Item is dropped.

After a successful drop the corresponding Reorder and Transfer client-side events fire.

At the server, the Reorder or Transfer events fire only if the AutoPostBackOnReorder or AutoPostBackOnTransfer properties are set to true.

Finally, the server-side Dropped event fires only if the dragged Items are dropped onto an HTML element, which is not an Item and has its id attribute set.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ListBox.Examples.Functionality.DragAndDrop.DefaultVB"Language="VB"  %>

<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" href="styles.css" type="text/css"/>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />

    <div class="demo-container">
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" CssClass="RadListBox1" runat="server" Width="200px" Height="200px"
                SelectionMode="Multiple" AllowTransfer="true" TransferToID="RadListBox2" AutoPostBackOnTransfer="true"
                AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true" OnDropped="RadListBox_Dropped" Skin="Office2010Blue">
                <Items>
                    <telerik:RadListBoxItem Text="Argentina" />
                    <telerik:RadListBoxItem Text="Australia" />
                    <telerik:RadListBoxItem Text="Brazil" />
                    <telerik:RadListBoxItem Text="Canada" />
                    <telerik:RadListBoxItem Text="Chile" />
                    <telerik:RadListBoxItem Text="China" />
                    <telerik:RadListBoxItem Text="Egypt" />
                    <telerik:RadListBoxItem Text="England" />
                    <telerik:RadListBoxItem Text="France" />
                    <telerik:RadListBoxItem Text="Germany" />
                    <telerik:RadListBoxItem Text="India" />
                    <telerik:RadListBoxItem Text="Indonesia" />
                    <telerik:RadListBoxItem Text="Kenya" />
                    <telerik:RadListBoxItem Text="Mexico" />
                    <telerik:RadListBoxItem Text="New Zealand" />
                    <telerik:RadListBoxItem Text="South Africa" />
                </Items>
            </telerik:RadListBox>
            <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox2" CssClass="RadListBox2" runat="server" Width="200px" Height="200px"
                SelectionMode="Multiple" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"
                OnDropped="RadListBox_Dropped" Skin="Office2010Blue">
                <Items>
                    <telerik:RadListBoxItem Text="USA" />
                </Items>
            </telerik:RadListBox>
            <div id="targetTextBox" class="targetTextBox">
                <asp:TextBox ID="TextBox1" runat="server" Wrap="true" Rows="3" TextMode="MultiLine"></asp:TextBox>
            </div>
        </telerik:RadAjaxPanel>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance