Below are my codes:

<ajaxToolkit:TabPanel ID="tbpReorder" runat="server" HeaderText="Reorder">
            <ContentTemplate>
                <asp:SqlDataSource ID="sqlPhotos" runat="server" ConnectionString="<%$ ConnectionStrings:classNotesConnStr %>"
                    SelectCommand="SELECT * FROM [classNotesPhoto] WHERE ([albumID] = @albumID) ORDER BY [position]"
                    UpdateCommand="UPDATE [classNotesPhoto] SET [albumID] = @albumID, [fileName] = @fileName, [filePath] = @filePath, [caption] = @caption, [profilePhoto] = @profilePhoto, [albumPhoto] = @albumPhoto, [description] = @description, [position] = @position, [certify] = @certify, [dateInsert] = @dateInsert WHERE [photoID] = @photoID" 
                    DeleteCommand="DELETE FROM [classNotesPhoto] WHERE [photoID] = @photoID" 
                    InsertCommand="INSERT INTO [classNotesPhoto] ([albumID], [fileName], [filePath], [caption], [profilePhoto], [albumPhoto], [description], [position], [certify], [dateInsert]) VALUES (@albumID, @fileName, @filePath, @caption, @profilePhoto, @albumPhoto, @description, @position, @certify, @dateInsert)">
                    <SelectParameters>
                        <asp:QueryStringParameter Name="albumID" QueryStringField="album" 
                            Type="Int32" />
                    </SelectParameters>
                    <DeleteParameters>
                        <asp:Parameter Name="photoID" Type="Int32" />
                    </DeleteParameters>
                    <UpdateParameters>
                        <asp:Parameter Name="position" Type="Int32" />
                        <asp:Parameter Name="userID" />
                        <asp:Parameter Name="originalID" Type="Int32" />
                    </UpdateParameters>
                    <InsertParameters>
                        <asp:Parameter Name="albumID" Type="Int32" />
                        <asp:Parameter Name="fileName" Type="String" />
                        <asp:Parameter Name="filePath" Type="String" />
                        <asp:Parameter Name="caption" Type="String" />
                        <asp:Parameter Name="profilePhoto" Type="Boolean" />
                        <asp:Parameter Name="albumPhoto" Type="Boolean" />
                        <asp:Parameter Name="description" Type="String" />
                        <asp:Parameter Name="position" Type="Int32" />
                        <asp:Parameter Name="certify" Type="Boolean" />
                        <asp:Parameter DbType="DateTime" Name="dateInsert" />
                    </InsertParameters>
                </asp:SqlDataSource>
                <ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" AllowReorder="True" SortOrderField="position"
                    DataSourceID="sqlPhotos" DataKeyField="photoID" PostBackOnReorder="False">
                    <DragHandleTemplate>
                        <div class="DragHandleClass">
                        </div>
                    </DragHandleTemplate>
                    <ItemTemplate>
                        <asp:Image ID="imgImage" runat="server" ImageUrl='<%# String.Format("{0}{1}", Eval("filepath"), Eval("filename")) %>'
                            Width="150px" />
                    </ItemTemplate>
                </ajaxToolkit:ReorderList>
            </ContentTemplate>
        </ajaxToolkit:TabPanel>

I am following this tutorial. When I tried to reorder, I get this popup error:

Reorder failed, see details below. \r\n\r\nFailed to reorder.

Any idea why?

Any idea? I've read a couple of thread regarding this same error and many said it has to do with the update not equal the select parameters but I did make my SQL DataSource so that both Select and Update are the same but I still recieve the same error.

Still no suggestion? It was weird that sometimes it works but many times it dosesn't. In any case, it does not save the position back into the database.

Hi mychucky,

Please refer to my sample code to reorder the Image here:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="TestReorderImage.aspx.vb"
    Inherits="SoluTest_ReorderList.TestReorderImage" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AjaxControlToolkit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
        /*Reorder List*/.dragHandle
        {
            width: 10px;
            height: 15px;
            background-color: Blue;
            background-image: url(images/bg-menu-main.png);
            cursor: move;
            border: outset thin white;
        }
        .callbackStyle
        {
            border: thin blue inset;
        }
        .callbackStyle table
        {
            background-color: #5377A9;
            color: Black;
        }
        .reorderListDemo li
        {
            list-style: none;
            margin: 2px;
            background-image: url(images/bg_nav.gif);
            background-repeat: repeat-x;
            color: #FFF;
        }
        .dragVisualContainer li
        {
            list-style: none;
            background-image: url(images/bg_nav.gif);
            background-repeat: repeat-x;
            color: #FFF;
        }
        .reorderListDemo li a
        {
            color: #FFF !important;
            font-weight: bold;
        }
        .reorderCue
        {
            border: dashed thin black;
            width: 100%;
            height: 25px;
        }
        .itemArea
        {
            margin-left: 15px;
            font-family: Arial, Verdana, sans-serif;
            font-size: 1em;
            text-align: left;
        }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <AjaxControlToolkit:ReorderList ID="ReorderList1" runat="server" AllowReorder="True"
            DataSourceID="SqlDataSource1" PostBackOnReorder="true" CallbackCssStyle="callbackStyle"
            DragHandleAlignment="Left" ItemInsertLocation="Beginning" DataKeyField="ID" SortOrderField="Priority"
            Width="400px">
            <ItemTemplate>
                <div class="itemArea">
                    <asp:Label ID="Label1" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("ID"))) %>' />
                    <span>- </span>
                    <asp:Label ID="lblCategory" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("UserName"))) %>' />
                    <asp:Image ID="Image1" ImageUrl='<%# Eval("ImageURL")+".jpg" %>' runat="server" />
                </div>
            </ItemTemplate>
            <ReorderTemplate>
                <asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
            </ReorderTemplate>
            <DragHandleTemplate>
                <div class="dragHandle">
                </div>
            </DragHandleTemplate>
        </AjaxControlToolkit:ReorderList>
        <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:DatabaseConnectionString2 %>"
            DeleteCommand="DELETE FROM [GetImage] WHERE [ID] = ?" InsertCommand="INSERT INTO [GetImage] ([ID], [UserName], [ImageURL], [Priority]) VALUES (?, ?, ?, ?)"
            ProviderName="<%$ ConnectionStrings:DatabaseConnectionString2.ProviderName %>"
            SelectCommand="SELECT [ID], [UserName], [ImageURL], [Priority] FROM [GetImage] ORDER BY [Priority]"
            UpdateCommand="UPDATE [GetImage] SET [UserName] = ?, [ImageURL] = ?, [Priority] = ? WHERE [ID] = ?">
            <DeleteParameters>
                <asp:Parameter Name="ID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="UserName" Type="String" />
                <asp:Parameter Name="ImageURL" Type="String" />
                <asp:Parameter Name="Priority" Type="Int32" />
                <asp:Parameter Name="ID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="ID" Type="Int32" />
                <asp:Parameter Name="UserName" Type="String" />
                <asp:Parameter Name="ImageURL" Type="String" />
                <asp:Parameter Name="Priority" Type="Int32" />
            </InsertParameters>
        </asp:SqlDataSource>
        <br />
    </div>
    </form>
</body>

Best regards,

Zhi-Qiang Ni

Okay, here are my codes. I tried to copy almost exactly as yours. And still it does not work. There is no popup error like before but the reorder does not work. As soon as I let go the reorder, it snaps back to its original position or priority. Any other suggestion?

<asp:SqlDataSource ID="sqlPhotos" runat="server" ConnectionString="<%$ ConnectionStrings:classNotesConnStr %>"
                            DeleteCommand="DELETE FROM [classNotesPhoto] WHERE [photoID] = @photoID" InsertCommand="INSERT INTO [classNotesPhoto] ([albumID], [fileName], [filePath], [caption], [profilePhoto], [albumPhoto], [description], [position], [certify], [dateInsert]) VALUES (@albumID, @fileName, @filePath, @caption, @profilePhoto, @albumPhoto, @description, @position, @certify, @dateInsert)"
                            SelectCommand="SELECT * FROM [classNotesPhoto] WHERE ([albumID] = @albumID) ORDER BY [position]"
                            UpdateCommand="UPDATE [classNotesPhoto] SET [albumID] = @albumID, [fileName] = @fileName, [filePath] = @filePath, [caption] = @caption, [profilePhoto] = @profilePhoto, [albumPhoto] = @albumPhoto, [description] = @description, [position] = @position, [certify] = @certify, [dateInsert] = @dateInsert WHERE [photoID] = @photoID">
                            <SelectParameters>
                                <asp:QueryStringParameter Name="albumID" QueryStringField="album" Type="Int32" />
                            </SelectParameters>
                            <DeleteParameters>
                                <asp:Parameter Name="photoID" Type="Int32" />
                            </DeleteParameters>
                            <InsertParameters>
                                <asp:Parameter Name="albumID" Type="Int32" />
                                <asp:Parameter Name="fileName" Type="String" />
                                <asp:Parameter Name="filePath" Type="String" />
                                <asp:Parameter Name="caption" Type="String" />
                                <asp:Parameter Name="profilePhoto" Type="Boolean" />
                                <asp:Parameter Name="albumPhoto" Type="Boolean" />
                                <asp:Parameter Name="description" Type="String" />
                                <asp:Parameter Name="position" Type="Int32" />
                                <asp:Parameter Name="certify" Type="Boolean" />
                                <asp:Parameter DbType="DateTime" Name="dateInsert" />
                            </InsertParameters>
                            <UpdateParameters>
                                <asp:Parameter Name="albumID" Type="Int32" />
                                <asp:Parameter Name="fileName" Type="String" />
                                <asp:Parameter Name="filePath" Type="String" />
                                <asp:Parameter Name="caption" Type="String" />
                                <asp:Parameter Name="profilePhoto" Type="Boolean" />
                                <asp:Parameter Name="albumPhoto" Type="Boolean" />
                                <asp:Parameter Name="description" Type="String" />
                                <asp:Parameter Name="position" Type="Int32" />
                                <asp:Parameter Name="certify" Type="Boolean" />
                                <asp:Parameter DbType="DateTime" Name="dateInsert" />
                                <asp:Parameter Name="photoID" Type="Int32" />
                            </UpdateParameters>
                        </asp:SqlDataSource>
                        <ajaxToolkit:ReorderList ID="rdlPhotos" runat="server" AllowReorder="True" SortOrderField="position"
                            DataSourceID="sqlPhotos" DataKeyField="photoID" PostBackOnReorder="true" CallbackCssStyle="callbackStyle"
                            DragHandleAlignment="Left" ItemInsertLocation="Beginning" Width="400px">
                            <ItemTemplate>
                                <div class="itemArea">
                                <asp:Image ID="imgImage" runat="server" ImageUrl='<%# String.Format("{0}{1}", Eval("filepath"), Eval("filename")) %>'
                                    Width="150px" />
                                </div>
                            </ItemTemplate>
                            <ReorderTemplate>
                                <asp:Panel ID="pnlReorder" runat="server" CssClass="reorderCue" />
                            </ReorderTemplate>
                            <DragHandleTemplate>
                                <div class="dragHandle">
                                </div>
                            </DragHandleTemplate>
                        </ajaxToolkit:ReorderList>

Other suggestion?

Hi mychucky,

To ensure the reorder action of ReorderListExtender, we need to complete the SQL Command including UpdateCommand. Actually, the Drag and Drop process is indeed an update of the DataBase’s “Priority” field. So, please test your SelectCommand and UpdateCommand in a common DataControl, change the position's value and check whether the order of the DataRow is changed when reloaded. That's the key to reorder the list.

Best regards,

Zhi-Qiang Ni