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>

DataSourceID - The DataSource to use to populate this control
DataKeyField - The primary key field for the data
SortOrderField - The field that represents the sort order of the items.
ItemInsertLocation - Determines where new items are inserted into the list, can be Beginning or End
DragHandleAlignment - Where the drag handle should be relative to the item row - can be "Top", "Bottom", "Left", or "Right"
AllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is present
ItemTemplate - The template to display for items in the list
EditItemTemplate - The template do display for a row that is in edit mode
ReorderTemplate - The template to use to show the drop location when doing a reorder operation. This template is not data bindable.
InsertItemTemplate - The template to show for adding new items to the list.
DragHandleTemplate - The template for the drag handle that the user clicks and drags to reorder items.
EmptyListTemplate - The template to show when the list has no data. This item is not data-bindable.
PostbackOnReorder - Determines if reorders initiate a postback or callback. To use any edit or delete functionality of a data-bound list, postbacks must be enabled.