‘Mo AJAX Pleeeeez?!!!
Here are some pointers to get you started:
- Copy the ReorderList and associated ObjectDataSource from the SampleToolkit Code.
- The associated DataSource can be any type you’d like other than an ObjectDataSource, just make sure you provide the Priority parameter for updates, insertions, and selects and a unique field identifying each of the ReorderList’s elements for updates, selects, and deletes. All remaining fields should be those relevant to the content of your ReorderList’s elements.
- Set the ReorderList’s DataSourceID attribute to your DataSource’s ID and the DataKeyField attribute to the unique field name.
- Write the corresponding queries (or stored procedures) for the select statement (be sure to order by priority here!), update statement (don’t forget to update the Priority parameter value here!), delete, and insert statements.
- Last, but most important, MAKE SURE you put a value into the DragHandleTemplate’s div. It doesn’t matter what; just throw something in there because without it, you won’t be able to drag your elements around and you will be baffled as to why it won’t work!!
For testing purposes, any arbitrary value(s) distinguishing each of the ReorderList elements within the ItemTemplate will do, and viola! Your control should be working; complete with database updates when you move the items around. Now for the really cool part – functionally, you can place ANYTHING within the ItemTemplate. For example, the application I’m building required users to be able to visually alter the order of blocks of reviewers for a work flow web application. In order to achieve this, I had to house 3 NESTED GRIDVIEWS within my ItemTemplate, each of which are editable/deletable, etc…and everything totally works!!
After one small change…which brings me to my next topic: UpdatePanels. Initially, these little dealios seem like a post-back avoiding savior. They’re extremely simple to implement allowing developers to essentially just execute server side, event-handler code for a control without a post-back just by including the control within an UpdatePanel. However, one soon realizes that attempting such a feat with even a slightly performance intensive control (such as a DropDownList with 1000+ elements), and the control becomes unusable; the reasons for which you will find: Here, in this person’s enlightening article.
What does this have to with a ReorderList? You’ll notice the sample ReorderList is housed within an UpdatePanel for reasons I’m not entirely certain and its presence was hosing up the performance of the controls contained within my various internal GridViews. The good news is that removing the UpdatePanel doesn’t seem to have any ill effect on the behavior of the ReorderList at all so I would suggest eliminating it altogether unless your ItemTemplate contains a level of simplicity comparable to that of the sample ReorderList’s.
That said; my mind reels (no, I don’t get out much), at the extensive use possibilities of this control. Any web application requiring users’ to declaratively order anything could potentially benefit from this control. Whether it’s a simple shopping list, or ordered favorite home prospects (complete with images and description) within a real estate website, or giant ImageMaps with routing sequences, or ANYTHING!!
At any rate, hats off to the creator of the AJAX ReorderList control for providing such a robust, adaptable, and functional tool that I can now include within my web application arsenal.
3 Comments »
Leave a Reply