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

Reorder

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

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>
<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>

Support & Learning Resources

Find Assistance