ReorderList with ObjectDataSource

If you ask me, the AJAX Control Toolkit's ReorderList is the most under appreciated control in the Toolkit.  Compared to many of the other controls, it gets no love.  The Toolkit demo site's sample for this control isn't really all that helpful and third party samples are sparse.  And how do you bind it with an ObjectDataSource control?  Read on to find out...

The ReorderList had a 'real word' use for me.  There was a situation where I inherited a web form with a priority ranked list that was composed of a list of items that each had a textbox control to the left of them.  The textbox contained the priority order for the item in the list.  If the user wanted to change the order, he or she would change the numbers in the textboxes and then press a Save button which updated the priority order for the list.  Obviously, the users were having a difficult time making this work.

In comes the ReorderList, the magical key to this situation.  But how does this work; the Toolkit sample site didn't go far enough.  I wanted to bind this with an ObjectDataSource control and it just wasn't working.  Well I eventually figured it out and the first thing I thought of was I needed to write an article about this.  Of course this was over 6 months ago but now that I have this blog I thought that someone may benefit from my pain.

I am including the sample project for this but let's walk through it.
First thing's first - we need some data to reorder.  How about a Wish List?  The below image shows a WishList table which is included in the project in a SQLExpress database.  There are only three columns: WishID (uniqueidentifier) which is the primary key; WishDescription (varchar) which is the wish text; and WishOrder (int) which holds the order of my wishes.  It is pictured here:

So next create a class in App_Code for the ObjectDataSource to bind to.  I've called it ReorderClass.  First we need to have a method return a DataSet containing the wish data in from the database.  Here is the code for that:
 

Since the order number from the ReorderList needs to be saved back in the database, we also need an Update method for our ObjectDataSource control.  The key here that many people miss is the Update method MUST have a method parameter for each of the data items that were selected in the above DataSet.  Not only is that true, but the method signatures must also be the same data type of the items returned from the Select method's DataSet.  Yes, even if you are not updating all the fields, you still need all the Selected fields in the Update method's signature.  So the DataSet in the Select method returned WishID, WishDescription, and WishOrder.  So, this Update method needs all three of those fields in its method signature.  The three method parameters are WishID which is of type Guid, WishDescription of type string, and WishOrder of type integer.  The code for this is here: 

Now it's time for the ReorderList control.  You can bind data to the ReorderList but unlike the GridView control, there is no built-in auto binding option.  You have to create the template to bind the data to.  Here I've created a table for that contains the Wish Order number and Wish Description.  Also note that the ReorderList has properties including SortOrderField and DataKeyField.  The SortOrderField needs to be bound to the data item containing the sort order for your items.  The DataKeyField needs to be bound to your data item's identifier field (most likely its primary key in the database).

Now we're going to bind this to an ObjectDataSource control.  Notice that the Select Method is the method that returns the DataSet.  Also notice that the UpdateParameters match the fields that were in the Select statement.  Since there is no option for Type of uniqueidentifier, the wishID Parameter has been set to type of Object.

Now that it's all together, it will load, reorder, and save the reorder.

It's not the simplest tool in the Toolkit to use but it is one of the coolest for sure.