Edit

Share via

Using Postbacks with ReorderList (C#)

  • Article

by Christian Wenz

Download PDF

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.

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">
 void Page_Load()
 {
 if (Page.IsPostBack)
 {
 lastUpdate.Text = "List last reordered at " + 
 DateTime.Now.ToLongTimeString();
 }
 }
</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" />

Each reordering triggers a postback

Each reordering triggers a postback (Click to view full-size image)

Next