ListBox - Reorder

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

Demo Configurator

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

RadListBox supports items reordering via the reorder buttons and drag and drop.

To enable the reordering functionality you need to set the AllowReorder property to true. After doing that, the reorder buttons will appear.

To enable reordering via drag and drop you also need to set the EnableDragAndDrop property to true.

If you want RadListBox to postback after reorder set the AutoPostBackOnReorder property to true.

In case you want to enable reordering only via drag and drop you can hide the reordering butons by setting the ShowReorder property to false:

<telerik:RadListBox AllowReorder="True" EnableDragAndDrop="True">
	<ButtonSettings ShowReorder="False" />
</telerik:RadListBox>
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.Reorder.DefaultCS" %>

<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>
<%@ 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>
</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 size-thin">
        <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox1" Height="200px" Width="300px"
            SelectionMode="Multiple">
            <Items>
                <telerik:RadListBoxItem Text="Argentina"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Australia" Selected="true"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Brazil"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Canada"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Chile"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="China"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Egypt"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="England"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="France"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Germany"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="India"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Indonesia"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Kenya"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="Mexico"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="New Zealand"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="South Africa"></telerik:RadListBoxItem>
                <telerik:RadListBoxItem Text="USA"></telerik:RadListBoxItem>
            </Items>
        </telerik:RadListBox>
    </div>

    <qsf:ConfiguratorPanel ID="ConfiguratorPanel1" runat="server">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <asp:CheckBox runat="server" ID="AllowReorderCheckBox" AutoPostBack="true" Checked="true"
                                Text="Allow reorder"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="AutoPostBackOnReorderCheckBox" AutoPostBack="true"
                                Checked="true" Text="Postback on reorder"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="DragDropCheckBox" AutoPostBack="true" Checked="true"
                                Text="Reorder via drag and drop"></asp:CheckBox>
                        </li>
                        <li>
                            <asp:CheckBox runat="server" ID="ShowReorderButtons" AutoPostBack="true" Checked="true"
                                Text="Show reorder buttons"></asp:CheckBox>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?