Using Postbacks with ReorderList

Christian Wenz

Overview

The ReorderList control in the AJAX Control Toolkit provides a list that can be reordered by the user via drag and drop. Whenever the list is reordered, a postback shall inform the server of the change.

Steps

There are several possible data sources for the ReorderList control. One is to use an XmlDataSource control:

<asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">      <Data>           <acronym>                <letter char="A" description="Asynchronous" />                <letter char="J" description="JavaScript" />                <letter char="A" description="And" />                <letter char="X" description="XML" />           </acronym>      </Data> </asp:XmlDataSource>

In order to bind this XML to a ReorderList control and enable postbacks, the following attributes must be set:

• DataSourceID: The ID of the data source
• SortOrderField: The property to sort by
• AllowReorder: Whether to allow the user to reorder the list elements
• PostBackOnReorder: Whether to create a postback whenever the list is rearranged

Here is the appropriate markup for the control:

<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"      AllowReorder="true"      DataSourceID="XmlDataSource1" PostBackOnReorder="true">

Within the ReorderList control, specific data from the data source may be bound using the Eval() method:

     <DragHandleTemplate>           <div class="DragHandleClass">           </div>      </DragHandleTemplate>      <ItemTemplate>           <div>                <asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />           </div>      </ItemTemplate> </ajaxToolkit:ReorderList>

At an arbitrary position on the page, a label will hold the information when the last reordering occurred:

<div>      <asp:Label ID="lastUpdate" runat="server" /> </div>

This label is filled with text in the server-side code, handling the postback:

<script runat="server">      Sub Page_Load()           If Page.IsPostBack Then                lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()           End If      End Sub </script>

Finally, in order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put on the page:

<asp:ScriptManager ID="asm" runat="server" />

Next Tutorial