Again I wanted to use an AJAX Toolkit item and the example Microsoft provided fell a bit short. Even the example that came with the AJAXToolkit Web Pages still wasn't fully developed. They left out on how to properly edit and update an item in the ReOrderList. In addition they used an ObjectDataSource and I don't use those very often.
I wanted to provide a full example of the ReOrderList that shows how to read, add, update, and delete items from the ReOrder list using a SQLDataSource instead of the ObjectDataSource Microsoft Provided. Please ignore the actually looks of this example as I didn't spend any time styling it with CSS. This just provides the functionality.
First I created a test table in my local SQL Database called TestTable1. The columns included are the following:
- intID (primary with identity enabled)
- strName
- strLink
- intOrder (for order of list items)
Next I coded up the ReOrder List page. I didn't use any code behind so I'm just pasting what the markup aspx page looks like.
######################################################################
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="AJAXOrderList.aspx.cs" Inherits="AJAXOrderList" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<!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>OrderedList AJAX</title>
<style type="text/css">
.ajaxOrderedList li
{
list-style:none;
}
</style>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server" ScriptMode="Release" />
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div class="ajaxOrderedList">
<ajaxToolkit:ReorderList ID="ReorderList1" runat="server"
AllowReorder="True"
PostBackOnReorder="False"
SortOrderField="intOrder"
DataKeyField="intID"
DataSourceID="sqlDSItems"
ItemInsertLocation="End">
<ItemTemplate>
<asp:HyperLink ID="HyperLink1" runat="server" Text='<% #Eval("strName") %>' NavigateUrl='<%# Eval("strLink") %>' />
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Edit" Text="Edit" />
<asp:LinkButton ID="LinkButton3" runat="server" CommandName="Delete" Text="Delete" />
</ItemTemplate>
<DragHandleTemplate>
<div style="height: 20px; width: 20px; border: solid 1px black; background-color: Red; cursor: pointer;">
</div>
</DragHandleTemplate>
<ReorderTemplate>
<div style="width: 300px; height: 20px; border: dotted 2px black;">
</div>
</ReorderTemplate>
<InsertItemTemplate>
<asp:Label ID="Label1" runat="server" Text="Name"></asp:Label><asp:TextBox ID="txtName" runat="server" Text='<%# Bind("strName") %>'></asp:TextBox><br />
<asp:Label ID="Label2" runat="server" Text="Link"></asp:Label><asp:TextBox ID="txtLink" runat="server" Text='<%# Bind("strLink") %>'></asp:TextBox><br />
<asp:Button ID="btnInsert" runat="server" Text="Add Link" CommandName="Insert" />
</InsertItemTemplate>
<EditItemTemplate>
<asp:TextBox ID="txtName" runat="server" Text='<%# Bind("strName") %>'/>
<asp:TextBox ID="txtLink" runat="server" Text='<%# Bind("strLink") %>' />
<asp:TextBox ID="txtOrder" runat="server" Text='<%# Bind("intOrder") %>' />
<asp:LinkButton ID="LinkButton1" runat="server" CommandName="Update" Text="Update" />
<asp:LinkButton ID="LinkButton2" runat="server" CommandName="Cancel" Text="Cancel" />
</EditItemTemplate>
</ajaxToolkit:ReorderList>
</div>
</ContentTemplate>
</asp:UpdatePanel>
<asp:SqlDataSource ID="sqlDSItems" runat="server" ConnectionString="<%$ ConnectionStrings:sqlLocal %>"
SelectCommand="SELECT [intID], [strName], [strLink], [intOrder] FROM [TestTable1] ORDER BY [intOrder]"
DeleteCommand="DELETE FROM [TestTable1] WHERE [intID] = @intID"
InsertCommand="INSERT INTO [TestTable1] ([strName], [strLink], [intOrder]) VALUES (@strName, @strLink, @intOrder)"
UpdateCommand="UPDATE [TestTable1] SET [strName] = @strName, [strLink] = @strLink, [intOrder] = @intOrder WHERE [intID] = @intID">
<DeleteParameters>
<asp:Parameter Name="intID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="strName" Type="String" />
<asp:Parameter Name="strLink" Type="String" />
<asp:Parameter Name="intOrder" Type="Int32" />
<asp:Parameter Name="intID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="strName" Type="String" />
<asp:Parameter Name="strLink" Type="String" />
<asp:Parameter Name="intOrder" Type="Int32" />
</InsertParameters>
</asp:SqlDataSource>
</form>
</body>
</html>
#####################################################
The one item I was wondering about the most was how to actually wire up the Edit, Update, Delete, and Cancel commands to the list. Since I was using a SqlDataSource this actually was very easy. You just need to add the attribute CommandName="" to a LinkButton or Button. For example if I want to activate the EditItemTemplate you'll notice the link button in the ItemTemplate with the attribute CommandName="Edit".
Then you'll notice in the EditItemTemplate to properly edit the item, for Text attribute is '<%# Bind("yourColumn") %>'. This will handle editing back to the database on its own. You'll also notice the same method for the Text attribute for the TextBoxes in the InsertItemTemplate.
Well again I'm showing this because the example from Microsoft left out the Edit, Update and Delete portions...and didn't use a SqlDataSource that the ReOrder list could bind too.
As always any problem with the code let me know so I can update this post, but I was just using this.
Currently rated 4.3 by 8 people
- Currently 4.25/5 Stars.
- 1
- 2
- 3
- 4
- 5