Ajax control toolkit is providing us a great control called ReoderList with lot of features. But there is not a direct method to deal with the database records. Anyway today I am bringing you a solution for this. This will view details from the database table in the reorderlist with both images and text. Not only that. It will update the new order to the database field once you change the order. I have tested this and this is my working code. You should change the commands in the SqlDataSource and change the field names in .cs file to your table field names.

You'd better keep remember this too for the best result. This will require the new release of the Ajax control toolkit and new framework of .net like 3.5.Because it is using Linq in .cs code. I found another issue and I have written to Microsoft people about this. Reorderlist control is not working in their IE 8 old version. I have mentioned this in my previous post. You can try with install new version of that browser and test it too.
.aspx


 
<asp:UpdatePanel ID="Up1" runat="server">
                 <ContentTemplate>
           
            <div class="reorderListDemo">
                <ajaxtoolkit:ReorderList ID="ReorderList1" runat="server" 
                                        AllowReorder="True" 
                                        PostBackOnReorder="true"
                                        DataSourceID="SqlDataSource1" 
                                        CallbackCssStyle="callbackStyle" 
                                        DragHandleAlignment="Right"
                                        ItemInsertLocation="End"
                                        DataKeyField="id"
                                        EnableViewState="true"
                                        SortOrderField="oderId"
                                        Width="500px"
                                        >
                                        
                                        <ItemTemplate>
                                            <div style="width:300px; display:inline; vertical-align:top;">
                                            
                                        <div style="width:50px;float:left; vertical-align:middle; padding-top:40px; ">  <asp:Label ID="Label2" runat="server" Text='<%# HttpUtility.HtmlEncode(Convert.ToString(Eval("oderId"))) %>' /> </div> <%--<%#  HttpUtility.HtmlEncode(Convert.ToString(Convert.ToInt32(Eval("oderId"))+1))%>--%>
                                        <div style="width:150px;float:left;">   <asp:Image Width="100px"  ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container.DataItem, "image_name", "~/DesktopModules/Ricette/imgUpload/tmp/tbn{0}")%>' /> </div>
                                        <div style="width:70px;float:left;">   <asp:ImageButton CommandName="Delete" ImageUrl="imgUpload/basket.png" ID="ImageButton1" runat="server" Height="70px" Width="56px" /> </div>                                          

                                            </div>
                                        </ItemTemplate>
                                        <EditItemTemplate>
                                            <asp:TextBox ID="TextBox1" runat="server" Text='<%# Bind("image_name") %>' />
                                            <asp:TextBox ID="TextBox2" runat="server" Text='<%# Bind("id") %>' />
                                            <asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("title_id") %>' />
                                            <asp:TextBox ID="TextBox5" runat="server" Text='<%# Bind("oderId") %>' />
                                            <asp:TextBox ID="TextBox6" runat="server" Text='<%# Bind("published") %>' />
                                        </EditItemTemplate>
                                        <ReorderTemplate>
                                            <asp:Panel ID="Panel1" runat="server" CssClass="reorderCue" />
                                        </ReorderTemplate>
                                        <DragHandleTemplate>
                                            <div style="height:99px; width:100px; cursor:move; float:left;">
                                                <asp:Image runat="server" ImageUrl="~/DesktopModules/Ricette/imgUpload/hand.gif" />
                                             </div>
                                        </DragHandleTemplate>
                                        
                                        <InsertItemTemplate>
                                            <div style="padding-left:5px; float:none; border-bottom:thin solid transparent;">
                                                <asp:Panel ID="Panel2" runat="server" DefaultButton="Button1" Width="650px" >
                                                        <asp:Button ID="Button1" runat="server"  CommandName="Insert" Text="Refresh and Publish" />
                                                </asp:Panel>
                                            </div>
                                        </InsertItemTemplate>
                                        
                </ajaxtoolkit:ReorderList>
            </div>
                <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
                ConnectionString="<%$ ConnectionStrings:SiteSqlServer %>" 
                DeleteCommand="DELETE FROM [Ricette_Images] WHERE [id] = @id" 
                InsertCommand="INSERT INTO [Ricette_Images] ([title_id], [image_name], [oderId], [published]) VALUES (@title_id, @image_name, @oderId, @published) DELETE FROM [Ricette_Images] WHERE [image_name] = 'noname'" 
                SelectCommand="SELECT [id], [title_id], [image_name], [oderId], [published] FROM [Ricette_Images] WHERE [title_id] = @title_id order by oderId asc" 
                UpdateCommand="UPDATE [Ricette_Images] SET [title_id] = @title_id, [image_name] = @image_name, [oderId] = @oderId, [published] = @published WHERE [id] = @id">
                
                <SelectParameters>
                    <asp:Parameter Name="title_id" Type="String" DefaultValue="<%= title_id %>" />
                </SelectParameters>
                <DeleteParameters>
                    <asp:Parameter Name="id" Type="Int32" />
                </DeleteParameters>
                <UpdateParameters>
                    <asp:Parameter Name="title_id" Type="Int32" />
                    <asp:Parameter Name="image_name" Type="String" />
                    <asp:Parameter Name="oderId" Type="Int32" />
                    <asp:Parameter Name="published" Type="Boolean" />
                    <asp:Parameter Name="id" Type="Int32" />
                </UpdateParameters>
                <InsertParameters>
                    <asp:Parameter Name="title_id" Type="Int32" DefaultValue="111" />
                    <asp:Parameter Name="image_name" Type="String" DefaultValue="noname" />
                    <asp:Parameter Name="oderId" Type="Int32" DefaultValue="11" /> 
                    <asp:Parameter Name="published" Type="Boolean" DefaultValue="false"/>
                </InsertParameters>
            </asp:SqlDataSource>
            
                </ContentTemplate>
            </asp:UpdatePanel>


.cs


 
protected void ReorderList1_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
//get Old Priority
int oldI = e.OldIndex;
//get New Priority
int newI = e.NewIndex;
//get the selected Item Value
string selectedDK = ReorderList1.DataKeys[oldI].ToString();
string i2updateList = "";
//Build update list based on everything after/equal to the new priority but not equal to the selected one and in order so they can be updated in order
SqlConnection oConn = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("SiteSqlServer"));
{
SqlCommand sqlCmd = new SqlCommand("select id from Ricette_Images where id <> '" + selectedDK + "' and oderId >= '" + newI + "' order by oderId asc", oConn);
oConn.Open();
using (SqlDataReader reader = sqlCmd.ExecuteReader())
{
while (reader.Read())
{
if (string.IsNullOrEmpty(i2updateList))
{
 
i2updateList = reader["id"].ToString();
}
else
{
 
i2updateList += "," + reader["id"].ToString();
}
}
}
}
int newPriority = newI;
string[] rolArr = null;
rolArr = i2updateList.Split(',');
//update each from the list by 1
foreach (var x in rolArr)
{
newPriority = newPriority + 1;
SqlConnection myConnection = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("SiteSqlServer"));
{
myConnection.Open();
SqlCommand myCommand = new SqlCommand("update Ricette_Images set oderId = '" + newPriority + "' where id='" + x + "'", myConnection);
 
myCommand.ExecuteNonQuery();
}
 
newPriority = newPriority;
}
//finally, update the selected one for its changed priority
SqlConnection myConne = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("SiteSqlServer"));
{
myConne.Open();
SqlCommand myCommand = new SqlCommand("update Ricette_Images set oderId = '" + newI.ToString() + "' where id='" + selectedDK + "'", myConne);
myCommand.ExecuteNonQuery();
}
}
void ReorderList1_ItemCommand(object sender, AjaxControlToolkit.ReorderListCommandEventArgs e, AjaxControlToolkit.ReorderListItemReorderEventArgs ee)
{
int oldI = ee.OldIndex;//get Old Priority
string selectedDK = ReorderList1.DataKeys[oldI].ToString();//get the selected Item Value
// If you want support for multiple commands
SqlConnection myConnect = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("SiteSqlServer"));
myConnect.Open();
if (e.CommandName == "Delete")
//return;
{
//DELETE FROM [Ricette_Images] WHERE [id] = @id
SqlCommand myCommand = new SqlCommand("DELETE FROM Ricette_Images where id='" + selectedDK + "'", myConnect);
myCommand.ExecuteNonQuery();
}
if (e.CommandName == "Select")
//return;
{
int titleid = Convert.ToInt32(HttpContext.Current.Session["RecordID"]);
//SqlDataSource1.SelectParameters.Add("userNum", userNum);
SqlDataSource1.SelectParameters.Add("@title_id", titleid.ToString());
//SELECT [id], [title_id], [image_name], [oderId], [published] FROM [Ricette_Images] WHERE [title_id] = title_id order by oderId asc"
SqlCommand sqlCmd = new SqlCommand("select [id], [title_id], [image_name], [oderId], [published] from Ricette_Images where title_id ='" + titleid + "' order by oderId DESC", myConnect);
sqlCmd.ExecuteNonQuery();
}
if (e.CommandName == "Insert")
//return;
{
string imgNullName = "t";
SqlCommand myCommandCheckNull = new SqlCommand("DELETE FROM Ricette_Images where image_name='" + imgNullName + "'", myConnect);
myCommandCheckNull.ExecuteNonQuery();
}
if (e.CommandName == "Refresh")
//return;
{
int Currenttitleid = Convert.ToInt32(HttpContext.Current.Session["RecordID"]);
bool Newpublished = true;
SqlConnection myConnect1 = new SqlConnection(System.Configuration.ConfigurationSettings.AppSettings.Get("SiteSqlServer"));
{
myConnect1.Open();
SqlCommand myCommand = new SqlCommand("update Ricette_Images set published = '" + Newpublished + "' where title_id='" + Currenttitleid + "'", myConnect1);
myCommand.ExecuteNonQuery();
}
}
}




.css







SQL


CREATE TABLE [dbo].[Ricette_Images](
 [id] [int] IDENTITY(1,1) NOT NULL,
 [title_id] [int] NULL,
 [image_name] [varchar](500) NULL CONSTRAINT [DF_Ricette_Images_image_name]  DEFAULT ('img'),
 [oderId] [int] NULL,
 [published] [bit] NULL CONSTRAINT [DF_Ricette_Images_published]  DEFAULT ((0)),
 CONSTRAINT [PK_Ricette_Images] PRIMARY KEY CLUSTERED 
(
 [id] ASC
)WITH (PAD_INDEX  = OFF, STATISTICS_NORECOMPUTE  = OFF, IGNORE_DUP_KEY = OFF, ALLOW_ROW_LOCKS  = ON, ALLOW_PAGE_LOCKS  = ON) ON [PRIMARY]
) ON [PRIMARY]

GO
SET ANSI_PADDING OFF


Welcome for your comments and for your questions.