Home/Web Forms/Tutorials/Chapter 5. Ajax Control Toolkit/ReorderList/Using Postbacks with ReorderList

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)

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

1.  
2.  You're ViewingUsing Postbacks with ReorderList (C#)
3. → NextDrag and Drop via ReorderList (C#)