Ajax Hacks

ReorderList Control

In many web and desktop applications, you may have come across the typical UI construct for reordering lists that is often done by two buttons (one for Up and another for Down) placed adjacent to the list itself. The user then has to select the item in the list and click the appropriate button enough times to get the selected item in the designated position. It would certainly be nice to be able to simply drag the item to the desired position instead.

You have already seen how easy it is with the controls provided in the ASP.NET AJAX tools to implement dragging and dropping of various controls on the page without page postbacks. However, trying to implement a data-bound list still requires much work to allow the user to reorganize the order of the items. The ReorderList control can be applied to a bound object source, such as an ObjectDataSource control, and provide AJAXstyle reordering of the bound items. Table 8-13 lists the main properties of this control.

Table 8-13. ReorderList Control Properties

Property Name Description

AllowReorder Boolean value indicating whether or not to enable reordering of the items in the list.

DataKeyField Field containing the primary key for the underlying data source.

DataMember Designated field name in the specified data source.

DataSource Data source object used to bind to the ReorderList control.

Property Name

Description

DataSourceID

DragHandleAlignment

DragHandleTemplate

EditItemTemplate

EmptyListTemplate

InsertItemTemplate

ItemInsertLocation

ItemTemplate

PostbackOnReorder

ReorderTemplate

SortOrderField ShowInsertItem

ID of the data source control used to retrieve the list of items.

Layout alignment of the drag handle (Top, Bottom, Left, Right).

Markup/template used for the drag handle. (All template-based properties derive from ITemplate and can be assigned programmatically as well.)

Markup/template used when the item is edited.

Markup/template used when there are no underlying items.

Markup/template used to create a new item.

Location of the newly created item (Beginning or End of the list).

Markup/template used to display an individual item.

Boolean value indicating whether or not to initiate a postback each time an item is reordered.

Markup/template used to show where the new item is being relocated to.

The key field in the data used to sort the list.

Boolean value indicating whether or not to display the inserted item.

As you can see by the properties, the ReorderList control not only provides the ability to manually drag and drop items to different positions in the list, it can also perform auto sorting if specified in its property, SortOrderField. One classic case for a list of items that can really take advantage of a reordering functionality is a to-do list of tasks including items whose priority can change. The following markup is used to create a to-do list that allows the user to reorganize its members by simply moving the individual items throughout the list.

<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"

PostBackOnReorder="false" DataSourceID="ObjectDataSource1" CallbackCssStyle="callbackStyle" DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ItemID" SortOrderField="Priority"> <ItemTemplate>

</ItemTemplate> <EditItemTemplate>

</EditItemTemplate>

<ReorderTemplate> <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />

</ReorderTemplate> <DragHandleTemplate>

<div class="dragHandle"></div> </DragHandleTemplate> <InsertItemTemplate>

</InsertItemTemplate> </ajaxToolkit:ReorderList>

As you can see, much like many other data-bound controls such as the ASP.NET DataList control, the ReorderList control has support for ItemTemplate, EditItemplate, and more, thereby allowing ample flexibility when dealing with lists of data. Figure 8-13 shows the sample page containing this code in the browser.

^ ReorderList Sample - Windows Internet Explorer

{^J - jg^ http://ajax.asp.net/ ^ | *» | X~| Lire Search

Ù "Ä g] Reordertistgjjriple

ASP.NET AJAX Control Toolkit

ReorderList Demonstration

Talk to customers - Make sure they want it

\ Design product - Figure out the features and architecture

HaVe product idea - Figure out opportunities

Testfeatures-UseTDD and a uta mated testin g

Build production version - Make it fast and robust

Build prototype - Work out the issues

Fix bugs - Make sure it works

E3 © Internet | Protected Mode: Off

Figure 8-13. Items of a to-do list can be rearranged using the ReorderList control.

0 0