Were you looking for a Tutorial using the AJAX control ToolKit ReorderList?

In Particular this is one of my favorite AJAX Extenders, User can reorder particular Tasks to do from a DataSource such as an XML or a Database, as the user drags it and places it in the list, it gets updates using postback. You can style the graphical feedback at that point to show progress or what is was replaced with. This may be a bit of an advanced Subject but thanks to the Microsoft AJAX control Toolkit, it makes this process so much easier.

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, 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.

In the Markup below we have added a few labels and panels. Remember you will need to add a DataSource to the Application, and set the properties accordingly. I suggest you look at the source Code first and familiarize yourself with the process of this powerful AJAX Control.
· First lets add a new WebForm to this project and name it ReorderList.aspx
· Remember to Add a ScriptManager to the page.
· Then were going to add a ReorderList and an Object data source.
· Configure the object datasource using either xml or a database. (Tip: I am assuming you know how to configure a datasource. If you do not please refer to a datasource Tutorials located in the tutorials section ASP.net )
· Don’t forget to set the properties
The properties in italics are optional.

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.

The markup of the page will look like:

Load the page in browser looks like as follows:

Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.