DevExpress has stepped up and offered to lead this open source project. In just a few short months, they have implemented a number of modern and strategic changes to the toolkit to help make it a valuable part of your ASP.NET Web Forms arsenal. This release is available NOW from http://devexpress.com/ms-act
Drag and Drop via ReorderList (C#)
The ReorderList control in the AJAX Control Toolkit provides a list that can be reordered by the user via drag and drop. The current order of the list shall be persisted on the server.
ReorderList control in the AJAX Control Toolkit provides a list that can be
reordered by the user via drag and drop. The current order of the list shall be
persisted on the server.
ReorderList control supports binding data from a database to the list. Best
of all, it also supports writing changes to the order of the list element back to
the data store.
This sample uses Microsoft SQL Server 2005 Express Edition as the data store. The
database is an optional (and free) part of a Visual Studio installation, including
express edition. It is also available as a separate download under http://go.microsoft.com/fwlink/?LinkId=64064. For this
sample, we assume that the instance of the SQL Server 2005 Express Edition is called
SQLEXPRESS and resides on the same machine as the web server; this is also the default
setup. If your setup differs, you have to adapt the connection information for the
The easiest way to set up the database is to use the Microsoft SQL Server Management
Studio Express (http://www.microsoft.com/downloads/details.aspx?FamilyID=c243a5ae-4bd1-4e3d-94b8-5a0f62bf7796&DisplayLang=en ). Connect to the server, double-click on
Databases and create
a new database (right-click and choose
New Database) called
In this database, create a new table called
AJAX with the following four columns:
id(primary key, integer, identity, not NULL)
Next, fill the table with a couple of values. Note that the
position column holds
the sort order of the elements.
The next step requires to generate an
SqlDataSource control to communicate with
the new database and its table. The data source must support the
SQL commands. When the order of the list elements is later changed, the
control automatically submits two values to the data source's
the new position and the ID of the element. Therefore, the data source needs an
<UpdateParameters> section for these two values:
<asp:SqlDataSource ID="sds" runat="server" ConnectionString="Data
Source=(local)\SQLEXPRESS;Initial Catalog=Tutorials;Integrated Security=True"
SelectCommand="SELECT [id], [char], [description], [position] FROM [AJAX] ORDER BY [position]"
UpdateCommand="UPDATE [AJAX] SET position=@position WHERE [id]=@original_id">
<asp:Parameter Name="position" Type="Int32" />
<asp:Parameter Name="original_id" Type="Int32" />
ReorderList control needs to set the following attributes:
AllowReorder: Whether the list items may be rearranged
DataSourceID: The ID of the data source
DataKeyField: The name of the primary key column in the data source
SortOrderField: The data source column that provides the sort order for the list items
<ItemTemplate> sections, the layout
of the list can be fine-tuned. Also, databinding is possible using the
as seen here:
<ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="position"
AllowReorder="true" DataSourceID="sds" DataKeyField="id">
<asp:Label ID="ItemLabel" runat="server" Text='<%#Eval("description") %>' />
The following CSS style information (referenced in the
section of the
ReorderList control) makes sure that the mouse pointer changes appropriately
when it hovers over the drag handle:
ScriptManager control initializes ASP.NET AJAX for the page:
<asp:ScriptManager ID="asm" runat="server" />
Run this example in the browser and rearrange the list items a bit. Then, reload
the page and/or have a look at the database. The altered positions have been maintained
and are also reflected by the values in the
position column in the database and
that all without any code, just by using markup.
This article was originally created on June 2, 2008