Click here to Skip to main content
15,868,016 members
Articles / Web Development / HTML
Article

ReorderList - bind to DataTable; save changes

Rate me:
Please Sign up or sign in to vote.
3.14/5 (13 votes)
14 Mar 20071 min read 146.5K   54   36
The ReorderList is one of the coolest controls in the ASP.NET AJAX Control Toolkit. This article intends to give a basic outline of how to subclass the control so you can bind it to a DataTable and, on a Reorder event, save the new order to the database.

Introduction

The ReorderList is one of the coolest controls in the ASP.NET AJAX Control Toolkit. This article intends to give a basic outline of how to subclass the control so you can bind it to a DataTable and, on a Reorder event, save the new order to the database. There is no source code to download with this article, only code sighted within. The focus of this article is on the ReorderList and not on saving and retrieving data from a database.

The Problem

The ReorderList expects as it's DataSource, an object that implements IList. My business objects work mostly with DataSets and DataTables and I wanted to bind to a DataTable. The control will load data from a DataTable but on a Reorder event an exception will be thrown stating the DataTable does not implement IList. I tried using ((IListSource)DataTable).GetList() but that didn't go anywhere.

The Solution

To begin, create a subclass of the ReorderList and override the DoReorder method like this:

C#
using System;
using System.Data;
using AjaxControlToolkit;

namespace My.Web.UI.Controls
{
    public class myReorderList : ReorderList
    {
        protected override bool DoReorder(int oldIndex, int newIndex)
        {
            if (DataSource is DataTable)
            {
                DataRowCollection rows = ((DataTable)DataSource).Rows;
                int NewListOrder = (int)rows[newIndex][SortOrderField];

                if (oldIndex < newIndex) //item moved down
                {
                    for (int i = oldIndex + 1; i <= newIndex; i++)
                    {
                        rows[i][SortOrderField] = 
                    (int)rows[i][SortOrderField] - 1;
                    }
                }
                else  //item moved up
                {
                    for (int i = oldIndex - 1; i >= newIndex; i--)
                    {
                        rows[i][SortOrderField] = 
                    (int)rows[i][SortOrderField] + 1;
                    }
                }
                rows[oldIndex][SortOrderField] = NewListOrder;
                return true;
            }
            else
            {
                throw new InvalidOperationException
            ("DataSource is not a System.Data.DataTable.");
            }
            return false;
        }
    }
}

Here is some example code for an aspx page that is almost exactly like the code found in ReorderList.aspx in the Samples project of the ASP.NET AJAX Control Toolkit. The one exception is the addition of OnItemReorder="ReorderList1_ItemReorder". Also notice SortOrderField="Priority". This indicates the name of the column in the data source DataTable that stores the item's order in the group. This property is used in the overridden DoReorder method in the subclass (sighted above) to store the new order. The subclassed control expects this column to be an int column.

ASP.NET
<MyAjaxToolkit:myReorderList ID="ReorderList1" runat="server"
    PostBackOnReorder="false"
    CallbackCssStyle="callbackStyle"
    DragHandleAlignment="Left"
    ItemInsertLocation="End"
    DataKeyField="ItemID"
    SortOrderField="Priority"
    OnItemReorder="ReorderList1_ItemReorder">
    <ItemTemplate>
        <div class="itemArea">
            <asp:Label ID="Label1" runat="server"
                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Title"))) %>' />
            <asp:Label ID="Label2" runat="server"
                Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("Description", " - {0}"))) %>' />
        </div>
    </ItemTemplate>
    <EditItemTemplate>
        <div class="itemArea">
            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("Title") %>' />
            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Description") %>' />
            <asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Priority") %>' />
        </div>
    </EditItemTemplate>
    <ReorderTemplate>
        <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
    </ReorderTemplate>
    <DragHandleTemplate>
        <div class="dragHandle"></div>
    </DragHandleTemplate>
    <InsertItemTemplate>
        <!-- bottom border is workaround for IE7 Beta issue where bg doesn't render -->
        <div style="padding-left:25px; border-bottom:thin solid transparent;">
            <asp:Panel ID="panel1" runat="server" DefaultButton="Button1">
                <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("Title") %>' />
                <asp:Button ID="Button1" runat="server" CommandName="Insert" Text="Add" />
                <asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server"
                    ErrorMessage="Please enter some text" ControlToValidate="TextBox1" />
            </asp:Panel>
        </div>
    </InsertItemTemplate>
</MyAjaxToolkit:myReorderList>

Then in the code behind the aspx page, we need something like this:

C#
protected void Page_Load(object sender, EventArgs e)
{
    ReorderList1.ItemDataBound += 
    new EventHandler<AjaxControlToolkit.ReorderListItemEventArgs>
                    (ReorderList1_ItemDataBound);
    if (!IsPostBack)
    {
        BindReorderList();
    }
    else
    {
        // Need code here to retrieve the data source DataTable from
        // the Session object or other persistence method and assign it to
        // ReorderList1.DataSource property
    }
}

void BindReorderList()
{
    // Need code here to fill SomeDataTable with a DataTable.
    // It must contain an int column named in the SortOrderField
    // property of the myReorderList control markup in the aspx page

    ReorderList1.DataSource = SomeDataTable;
    ReorderList1.DataBind();

    //Need to save SomeDataTable to the Session object or 
    //other persistence method
}

protected void ReorderList1_ItemReorder(object sender, 
        AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
    // need code to save changes made to the data source DataTable
    // The changes were made in the overridden DoReorder method
    // in the MyReorderList control

    BindReorderList();
}

License

This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


Written By
Web Developer
United States United States
Rip Ryness has been a professional developer since 1996 after receiving a B.S. in Computer Science from Menlo College in Atherton, CA.
He is currently seeking projects that will expand on his main interest of buiding web based business solutions. His resume and contact info can be found here (pdf).

Comments and Discussions

 
GeneralMy vote of 1 Pin
rafantelo29-Jun-10 10:57
rafantelo29-Jun-10 10:57 
GeneralMy vote of 2 Pin
Member 44168808-Mar-09 17:20
Member 44168808-Mar-09 17:20 
GeneralI really suffered by this article Pin
Member 44168808-Mar-09 17:19
Member 44168808-Mar-09 17:19 
NewsIMPORTANT NOTE, IT ISN'T NEEDED ANYMORE Pin
Emiliano Parizzi5-Jun-08 9:24
Emiliano Parizzi5-Jun-08 9:24 
GeneralOverriding DoReorder Pin
Emiliano Parizzi4-Jun-08 12:10
Emiliano Parizzi4-Jun-08 12:10 
QuestionThe name 'ReorderList1_ItemDataBound' does not exist in the current context ? Pin
superconsultant10-Jan-08 11:58
superconsultant10-Jan-08 11:58 
QuestionRefresh Item Order? Pin
GShenanigan17-Sep-07 23:30
GShenanigan17-Sep-07 23:30 
AnswerRe: Refresh Item Order? Pin
Al Beback1-Aug-08 4:10
Al Beback1-Aug-08 4:10 
AnswerThe solution Pin
Al Beback3-Aug-08 5:51
Al Beback3-Aug-08 5:51 
QuestionDisplay the ReorderList from left to right? Pin
DPLyonnais13-Sep-07 17:53
DPLyonnais13-Sep-07 17:53 
GeneralRe: Display the ReorderList from left to right? Pin
_Nugs_16-Apr-08 11:53
_Nugs_16-Apr-08 11:53 
GeneralRe: Display the ReorderList from left to right? Pin
_Nugs_16-Apr-08 11:54
_Nugs_16-Apr-08 11:54 
rows not cows... lol WTF | :WTF:
GeneralTwo Reorderlists Pin
jabdal15-Aug-07 10:28
jabdal15-Aug-07 10:28 
GeneralRe: Two Reorderlists Pin
cakeman394-Apr-12 7:39
cakeman394-Apr-12 7:39 
GeneralUnknown server tag 'ajaxToolkit:myReorderList'. Pin
jabdal15-Aug-07 6:19
jabdal15-Aug-07 6:19 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
Rip Ryness15-Aug-07 8:33
Rip Ryness15-Aug-07 8:33 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
jabdal15-Aug-07 10:00
jabdal15-Aug-07 10:00 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
jabdal15-Aug-07 10:12
jabdal15-Aug-07 10:12 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
CandyMe12-Nov-07 4:38
CandyMe12-Nov-07 4:38 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
Rip Ryness13-Nov-07 10:48
Rip Ryness13-Nov-07 10:48 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
CandyMe13-Nov-07 17:06
CandyMe13-Nov-07 17:06 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
Zubair Ahmed10-Dec-07 3:59
Zubair Ahmed10-Dec-07 3:59 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
superconsultant16-Jan-08 7:57
superconsultant16-Jan-08 7:57 
GeneralRe: Unknown server tag 'ajaxToolkit:myReorderList'. Pin
Emiliano Parizzi4-Jun-08 9:32
Emiliano Parizzi4-Jun-08 9:32 
Questionhow to move items one reorderlist to another reorderlist in AJAX Pin
serkanweb16-Jul-07 23:06
serkanweb16-Jul-07 23:06 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.