Using Postbacks with ReorderList (VB)

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:

[!code-aspxMain]

   1:  <asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">

   2:   <Data>

   3:   <acronym>

   4:   <letter char="A" description="Asynchronous" />

   5:   <letter char="J" description="JavaScript" />

   6:   <letter char="A" description="And" />

   7:   <letter char="X" description="XML" />

   8:   </acronym>

   9:   </Data>

  10:  </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:

[!code-aspxMain]

   1:  <ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"

   2:   AllowReorder="true"

   3:   DataSourceID="XmlDataSource1" PostBackOnReorder="true">

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

[!code-aspxMain]

   1:  <DragHandleTemplate>

   2:   <div class="DragHandleClass">

   3:   </div>

   4:   </DragHandleTemplate>

   5:   <ItemTemplate>

   6:   <div>

   7:   <asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />

   8:   </div>

   9:   </ItemTemplate>

  10:  </ajaxToolkit:ReorderList>

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

[!code-aspxMain]

   1:  <div>

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

   3:  </div>

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

[!code-aspxMain]

   1:  <script runat="server">

   2:   Sub Page_Load()

   3:   If Page.IsPostBack Then

   4:   lastUpdate.Text = "List last reordered at " & DateTime.Now.ToLongTimeString()

   5:   End If

   6:   End Sub

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

[!code-aspxMain]

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

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

Previous Next

Comments ( )