Using JQuery UI to create a complex ordered reference data editor

JQuery is great, as is JQuery UI.


I had a requirement in a project to create an admin screen to edit reference data used in drop downs for other screens. The drop down options had to be ordered, enabled/disabled and allow users to add new options. Before JQuery I would have implemented this using a very message control with multiple buttons for Enable/Disable/Up/Down, all causing postbacks or using very large amounts of Javascript.

Using JQuery UI Sortable control I was able to do this very cleanly, just two ordered lists setup as connected and some neat Javascript to add/remove. Now I have a very UX friendly drag/drop list that users can re-order the options as they like.


Source (zip embedded in word doc as Posterous doesn’t like zips):



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