Sorting items using ASP.NET AJAX Toolkit ReorderList control

A common issue that I find myself falling into is how to sort things such as categories. I could sort them alphabetically or by child record counts, but most often my system owners (who I’m developing my web applications for) want to be able to reorder the categories to match either the process flow or priorities.

This can easily be done by adding a new field to the database record to store the sort order precedence and a new textbox on the web form to edit/add new category records. However, editing one category at a time in a web form leads to a bit of confusion since it’s easy to forget whether the category should be #3 or #4. They want something more visual. And that’s where the AJAX ToolkitReorderList control comes in.

The control allows users to drag and drop list items to set the sort order. It is easy to implement and even easier to use. And best of all, this control gives the site administrators a better visual representation of the categories in the specific order.

Here’s what I’m using as my ASP.NET design view:

HTML Source Code:

<ajaxToolkit:ReorderList ID="lstReorder" runat="server"

DragHandleAlignment="Left" ItemInsertLocation="End"

        AllowReorder="true" ShowInsertItem="false" PostBackOnReorder="false"
        OnItemReorder="lstReorder_Reorder">
        <ItemTemplate>
            <%# Eval("TopicName") %>ItemTemplate>
    ajaxToolkit:ReorderList>

The above code will create a HTML unordered list (ul) with the TopicName property displayed for each of the records of the datasource. You can use CSS to change the unordered list to use a numbered list by setting the list-style-type attribute to “decimal” value.

We set the datasource in the code-behind page methods, but you can also use ObjectDataSource or SqlDataSource as your control’s datasource. Using one of those datasource types, makes this a bit easier since you don’t need to write your own update statements — you can just specify the sort field to be updated and the primary key field.

Here’s my code-behind page methods:

ASP.NET Code Behind:

protected void Page_Load(object sender, EventArgs e)
{
    if (!IsPostBack)
    {
        LoadData();
        this.lstReorder.DataSource = topics;
        this.lstReorder.DataBind();
    }
}

private void LoadData()
{
    topics = new TopicCollection();
    // insert code here to populate the Topic Collection
}

protected void lstReorder_Reorder(object sender, ReorderListItemReorderEventArgs e)
{
    LoadData();
    Topic movedTopic = topics[e.OldIndex];
    topics.RemoveAt(e.OldIndex);
    topics.Insert(e.NewIndex, movedTopic);

    int i = 0;
    foreach (Topic topic in topics)
    {
        topic.SortOrder = i++;
        topic.Save();
    }      

    this.lstReorder.DataSource = topics;
    this.lstReorder.DataBind();
}