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.


  • Thanks, I was trying to figure this out found another example that had the only way to accomplish this storing items in session state, and this one helped me do it without sessions. Awesome write up, and the key about making sure the number of values match was my last obstacle. I'll be resuing this throughout my application very helpful very helpful.

  • its really good feature that you have explore in this example. Good job

  • Thanks a lot. For last two days I have search something exactly like this. Just now I have tried it out with my own application and it works fine.

    Thank you again.

  • Thanks a lot, I have been trying to make the Reorderlist work and all the samples are really poors, but you have the real solutions and EXPLANAITIONS of how this component work.

    Very good article.

  • well done...and very very helpful

  • Thanks so much. Works great, and just what I needed!

  • I am trying to bind this to a list of objects using a objectdatasource. I am having some issues with the functionality when i do an edit or add, can you point me to a good place to resolve these issues.

  • Great article.
    You helped me a lot.


  • Thank you, you saved my day. I had another page that working but could not understand what i am missing on new one. The point , update parameters does not match with select fields.


  • This works great.

    However, when I delete an Item, it doesnt automatically re-assign orders. Not that this really matters but it means I end up with the orders as 2,3,5,6,7,10 etc...

    Any ideas?

  • You're a life saver

  • don't work with version 30512 ???

  • You save my life! :)

  • I can't make any reordering (movements) ?
    Haven't changed the code... just ran it from inside Visual Studio 2005 ?!

  • Hi, This was a great help but When i drag and drop the item my wishorder value changes in database... any chance u know the solution, please help me.


  • I follow the tutorial and it's working great but when I modified it the order can't be saved to database

    please help

  • I have three columns in reorderlist ,when I bind a list in that reorderlist,only two columns are binding and remaining is not binding

  • Brilliant Article helped me get my head around this. Thank you.

  • This code is not working for me. Is this code compatible with IE? You code works fine in Google Chrome but not in IE.

    I Tried the same logic for my project and I observed its not calling function ReorderWishList() at all. In my DB Table I have WishID as "INT, Primary Key". I don't know where I am going wrong. Help will be greatly appreciated.


  • Good One. This helped me a lot. I was googling it for a long time.
    Thank you very much

  • Good Article. This helped me a lot. Really appreciated.

    Thanks so much & aloha!

  • it is a nice article, i have downloaded your article it always fire WishList method not and then page got refreshed and same order remains why it is not firing update method?

Comments have been disabled for this content.