ReorderList

Demo Page

ReorderList is an ASP.NET AJAX control that implements a bulleted data-bound list with items that can be reordered interactively. To reorder items in the list, a 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 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. ReorderList can also be bound to a data source that implements IList (such as Arrays). The ReorderList control is different than other samples because it is an ASP.NET server-side control that is aware of ASP.NET AJAX behavior. Rather than extending existing controls on a page, it delivers rich client-side experience directly and still has a traditional postback server model for interaction with an application. ReorderList can handle reorders in two ways either via a callback or postback. In the case of a callback, no page postback happens on reordering. This is useful if data is only to be ordered. If data items are to be deleted or edited, a full postback needs to occur to sync the server side-state with the client0side state. The PostbackOnReorder property enables this.

Properties

Name	Description
AllowReorder	Determines whether or not to allow drag/drop reordering. It is automatically set to true if ReorderTemplate is present
CallbackCssStyle	A callback CSS style
DataKeyField	The primary key field for data
DataKeys	The indexed collection of data keys (one key for each row when data is bound)
DataSourceID	ID of the data source to use to populate this control
DragHandleAlignment	Sets the drag handle relative to the item row (Top, Bottom, Left, or Right)
DragHandleTemplate	A template for the drag handle that a user clicks and drags to reorder items
EditItemIndex	An index of an item that is currently in Edit mode. The default value is -1, which means no item is in edit mode
EditItemTemplate	A template to display for a row that is in Edit mode
EmptyListTemplate	A template to show when a list has no data. This item is not data-bindable
HasFooter	Determines whether or not the list has a footer
HasHeader	Determines whether or not the list has a header
HasSeparators	Determines whether or not the list has separators
InsertItemTemplate	A template to show for adding new items to the list
ItemInsertLocation	Determines where new items are inserted into the list (Beginning or End)
Items	A collection of reodered list items
ItemTemplate	A template to display for items in the list
LayoutType	The type of a layout to apply to items. If Table is selected, the DragHandleAlignment property is used to lay out items in relation to the drag handle. If not, items are simply wrapped in the Panel controls and can be positioned using CSS
PostBackOnReorder	Determines whether or not to do a postback on reordering
ReorderTemplate	A template to use as a visible drop element when a user is dragging an item. This template is not data-bindable
RepeatedItemCount	Determines the count of repeated items
ShowInsertItem	Determines whether or not the InsertItem is shown. If this value is not set and the InsertItemTemplate is set, the default value is set to true
SortOrderField	The name of a column that controls the sort order of rows in the data base

Methods

Name	Description
GetItemStyle(itemType, repeatIndex)	Returns style of the reorder list item
RenderItem(itemType, repeatIndex, repeatInfo, writer)	Renders an item
UpdateItem(rowIndex)	Updates the specified row with its current values

Methods

GetItemStyle(itemType, repeatIndex)

Returns style of the reorder list item

Params:

• itemType

  • Type: ListItemType
  • Description: Item type

• repeatIndex

  • Type: Int
  • Description: Repeat index

RenderItem(itemType, repeatIndex, repeatInfo, writer)

Renders an item

Params:

• itemType

  • Type: ListItemType
  • Description: Item type

• repeatIndex

  • Type: Int
  • Description: Repeat index

• repeatInfo

  • Type: RepeatInfo
  • Description: Repeat into

• writer

  • Type: HtmlTextWriter
  • Description: Writer

UpdateItem(rowIndex)

Updates the specified row with its current values

Params:

• rowIndex
  • Type: Int
  • Description: Row index