ASP.NET ListView Drag and Drop reordering using JQuery

A recent project that I have been working on, required that the user be able to rank data in any order. There a several ways to implement a reordering feature, including adding up and down arrows to each row. However, this can become tedious especially with a large table of data when an item needs to go from the bottom row to the top.

A cool way to implement a reordering feature is to use the Table Drag and Drop JQuery plugin created by Isocra Consulting. The plugin requires that the data be displayed in a table format. To achieve this I am using the <asp:ListView> control which is bound to an XML document that will act as the database and save the changes.

Download Source (zip file)

To begin with download the latest JQuery library and the JQuery Table Drag and Drop plugin and add those scripts to your .aspx page.

Next, add a <asp:ListView> control which will generate a clean HTML table. There are other ASP.NET server controls that render tables such as the <asp:GridView> control, but the <asp:ListView> is very flexible and more importantly does not add unnecessary HTML tags to the output. In this example I am binding the <asp:ListView> to an <XmlDataSource>, which can easily be replaced with a Database connection.

Then, add the javascript that will handle the reordering. This requires only a few lines of code because most of the magic takes place within the plugin. In order to save the reordering action performed by the user, I am using a PageMethod that will call a Webservice. The goal of the PageMethods.Reorder Webservice is to rewrite the rank attribute in the Customers.xml file according to the user selections.

The last step is to implement the Webservice that is responsible for saving the reordering actions. Again, I have done this with an XML Document but this can all be done with a database as well. I used XLinq to query and update the rank attribute of Customers.xml file. The Webservice has two parameters that are supplied by the onDropItem javascript handler, which give me the old rank order (before the item was reordered) and new rank order (where the item was reordered to). If the old rank order is greater than the new rank order than the user moved the item up the table, otherwise it was moved down the table.

Tip

Another great JQuery plugin is the HightLightFade plugin. I am using this as a way to give the user feedback when the drop occurs. Again this is very simple yet powerful and only requires one line of javascript to implement!

Still quiet here.sas

Leave a Response