Language

Using Postbacks with ReorderList (C#)

By Christian Wenz|

Download Code or 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 (Click to view full-size image)

This article was originally created on June 2, 2008

Author Information

Christian Wenz

Christian Wenz – Christian Wenz is an author, trainer, and consultant. His main focus of working and writing is on web technologies and security. Christian has written or co-written over 100 books for various publishers. He works with both open source and closed source web technologies. This leads to the unusual situation that he has both been awarded a Microsoft MVP for ASP/ASP.NET and is listed in Zend's Who is Who of PHP. He is also listed in Mozilla's credits (about:credits) and is considered an expert in browser-agnostic JavaScript.