ReorderList control

Reoder listIn past I have developed at least 2 or 3 javascript/ controls that were more or less successfully representing a reorder list of items. So, user would be able to drag and drop items in the list and in doing so change their order. When I saw this control in the AtlasControlTooking I’ve became very excited and decided we’ll improve our keyword management page in reBlogger. Well… we probably will, but not just yet. ReorderList still does not work together with UpdatePanel, but seems like it will in the next CTP… Anyway, since I’ve spent half an hour playing with it I just may show you how it works without update panel.

I guess, the reason why page reloads after reordering was by design and not a mistake. To quote : “Rather than extending existing controls on the page, it delivers a rich client experience directly and still has a traditional post-back server model for interacting with the application.” I’ll spend some more time with this control in the near feature (namely trying to make nested reorder lists working), so I’ll be writing more about this.

So, to get this working you need to create a new website from “Atlas website” template. You know the drill by now. Create a datasource (I’ve used MS Access… just to make everything even more fun 🙂 ). The example you’ll see crudely resembles to the keywords table in reBlogger. Here is the code for datasource, though you’ll probably make your own. Any datasource will work. IMPORTANT! – if you are going to allow reordering, your datasource needs to have UpdateCommand enabled. Obviously, when ReorderList changes the vaues of the SortOrderField, UpdateCommand will come in handy :).


Next thing you will do is add the ReorderList control. There are 3 VERY IMPORTANT properties you need to set here (most of the forum questions about ReoderList I’ve stubled upon are due to the one of these 3 properties not being set).

1. DataKeyField – this is the primary key of your table. In my case, that was KeywordID
2. SortOrderField – this is the integer(!) field in your db table that holds the order of the items. Don’t forget to add this field in your database and to set this property
3. AllowReorder – hmmm… set this to true, or you’ll end up with just another static list 🙂


So that’s it. It works, but every time I’ve reordered the list page refreshed. I don’t like that. I’ve tried to put the ReoderList in an update panel, but as I’ve said, currently those two are not very nice to each other.

The whole project you can download from reBlogger lab.

This blog is being delivered to you by
“Do you know what your employees are blogging about?”

14 Responses to “ReorderList control”

  1. Sliding Task Lists project (day 5) – Reorder Lists and client side update panel refresh « Coding Atlas Says:

    […] I’ve already written the post on ReorderList (you can read it here), so I won’t repeat myself. However, this time I’m using SqlDataSource, and in that data source I make sure that only the big, uncompleted tasks for the currently logged in user are pulled out. The update command simply changes the priority (hmm… I must admit I’m not sure do I need this update command here… maybe it would work without it as well?!). […]

  2. Andrew Woo Says:

    Do you have any issues with the ReorderList when you scroll down your page and try to reorder an item? I am finding that when I click my drag handle, I get the prohibited icon and the ‘faded’ item is way above my drag handle.

  3. Shane Shepherd Says:

    I am currently developing a page which features the reorderlist control nested inside of a repeater. I would be interested to see any progress you have made in this area.

  4. Shane Shepherd Says:

    There is a bug in the current version of the Ajax Control Toolkit (10301) which prevents the reorder event from working in a nested reorder list. More on this can be found here:

  5. Seree Says:

    I got the same bug!

  6. Useful AJAX Links | pc-aras Says:

    […] ReorderList control (Coding […]

  7. Marinkina Says:

    Да,aleks,побороть лень, действительно иногда очень сложно..

  8. Gavrilin Says:

    Да,aleks,побороть лень, действительно иногда очень сложно..

  9. Cederash Says:

    Подписался на RSS, буду следить =)

  10. Ferinannnd Says:

    Полностью согласна!

  11. Avertedd Says:

    Не понимаю причину такого ажиотажа. Ничего нового и мнения разные.

  12. Naszer Says:

    Fuck Не понимаю причину такого ажиотажа. Ничего нового и мнения разные.

  13. Says:

    “ReorderList control Coding Atlas” ended up being a really
    good article, . I hope you keep creating and I am going to continue to
    keep reading through! Many thanks ,Oma

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: