ReorderList control

In past I have developed at least 2 or 3 javascript/asp.net 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 atlas.asp.net : “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 .

OPEN CODE IN NEW WINDOW

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

OPEN CODE IN NEW WINDOW

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
reBlogger.com
“Do you know what your employees are blogging about?”

---