Ajax Control Toolkit ReorderList

Modified on 2010/04/16 01:03 by Stephen Walther — Categorized as: Uncategorized

ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.

When bound to data, the ReorderList control will behave like many other databound controls. If the data you are displaying has a field that determines sort order (e.g. the select query is sorted by this column), and that column is of an integer type, the ReorderList can automatically perform reorders if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList (such as Arrays).

The ReorderList control is different than the other samples here because it is an ASP.NET server control that is aware of ASP.NET AJAX behaviors. Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.

The ReorderList can handle reorders in two ways, either via a callback or via a postback. For a callback, no page postback happens on a reorder. This is useful if the data is only to be ordered. If the data items are to be deleted or edited, a full postback needs to occur to sync the server side state with the client side state. The PostbackOnReorder property enables this.

ReorderList Server Properties

The properties in italics are optional.

<ajaxToolkit:ReorderList ID="ReorderList1" runat="server" 
    DataSourceID="ObjectDataSource1"
    DragHandleAlignment="Left" 
    ItemInsertLocation="Beginning"
    DataKeyField="ItemID" 
    SortOrderField="Priority"
    AllowReorder="true">
      <ItemTemplate>...</ItemTemplate>
      <ReorderTemplate>...</ReorderTemplate>
      <DragHandleTemplate>...</DragHandleTemplate>
      <InsertItemTemplate>...</InsertItemTemplate>
</ajaxToolkit:ReorderList>