AJAX Control ToolKit ReorderList Extender Tutorial Using C# ASP.NET
Were you looking for a Tutorial using the AJAX control ToolKit ReorderList?
In Particular this is one of my favorite AJAX Extenders, User can reorder particular Tasks to do from a DataSource such as an XML or a Database, as the user drags it and places it in the list, it gets updates using postback. You can style the graphical feedback at that point to show progress or what is was replaced with. This may be a bit of an advanced Subject but thanks to the Microsoft AJAX control Toolkit, it makes this process so much easier.
You know what else was easy?
When..
We chose
Server Intellect for its
cloud hosting, for our web hosting. They have managed to handle virtually everything for us, from start to finish. And their customer service is stellar.
ReorderList is an ASP.NET AJAX control that implements a bulleted, data-bound list with items that can be reordered interactively. To reorder the items in the list, the user simply drags the item's control bar to its new location. Graphical feedback is shown where the item will be placed as it is dragged by the user. The data source is updated after the item is dropped in its new location.
When bound to data, the ReorderList control will behave like many other databound controls. If the data you are displaying has a field that determines sort order, and that column is of an integer type, the ReorderList can automatically perform reorders if its SortOrderField property is set. The ReorderList can also bind to any data source that implements IList.
Are you lost?
In the Markup below we have added a few labels and panels. Remember you will need to add a DataSource to the Application, and set the properties accordingly. I suggest you look at the source Code first and familiarize yourself with the process of this powerful AJAX Control.
· First lets add a new WebForm to this project and name it ReorderList.aspx
· Remember to Add a ScriptManager to the page.
· Then were going to add a ReorderList and an Object data source.
· Configure the object datasource using either xml or a database. (Tip: I am assuming you know how to configure a datasource. If you do not please refer to a datasource Tutorials located in the tutorials section ASP.net )
· Don’t forget to set the properties
The properties in italics are optional.
1. <ajaxToolkit:ReorderList ID="ReorderList1" runat="server"
2. DataSourceID="ObjectDataSource1"
3. DragHandleAlignment="Left"
4. ItemInsertLocation="Beginning"
5. DataKeyField="ItemID"
6. SortOrderField="Priority"
7. AllowReorder="true">
8. <ItemTemplate>...</ItemTemplate>
9. <ReorderTemplate>...</ReorderTemplate>
10. <DragHandleTemplate>...</DragHandleTemplate>
11. <InsertItemTemplate>...</InsertItemTemplate>
12.</ajaxToolkit:ReorderList>
· DataSourceID - The DataSource to use to populate this control
· DataKeyField - The primary key field for the data
· SortOrderField - The field that represents the sort order of the items.
· ItemInsertLocation - Determines where new items are inserted into the list, can be Beginning or End
· DragHandleAlignment - Where the drag handle should be relative to the item row - can be "Top", "Bottom", "Left", or "Right"
· AllowReorder - whether to allow drag/drop reordering. This is automatically set to true if a ReorderTemplate is present
· ItemTemplate - The template to display for items in the list
· EditItemTemplate - The template do display for a row that is in edit mode
· ReorderTemplate - The template to use to show the drop location when doing a reorder operation. This template is not data bindable.
· InsertItemTemplate - The template to show for adding new items to the list.
· DragHandleTemplate - The template for the drag handle that the user clicks and drags to reorder items.
· EmptyListTemplate - The template to show when the list has no data. This item is not data-bindable.
· PostbackOnReorder - Determines if reorders initiate a postback or callback. To use any edit or delete functionality of a data-bound list, postbacks must be enabled.
The markup of the page will look like
<%@ Page Language="C#" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="asp" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<script runat="server">
</script>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Ajax Control - Reorder List</title>
<style>
/*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">
<asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</asp:ToolkitScriptManager>
<b>ReorderList Demonstration</b><br /><br />
<i>To Do:</i>
<asp:UpdatePanel ID="up1" runat="server">
<ContentTemplate>
<div class="reorderListDemo">
<asp:ReorderList ID="ReorderList1" runat="server"
PostBackOnReorder="false"
DataSourceID="ObjectDataSource1"
CallbackCssStyle="callbackStyle"
DragHandleAlignment="Left"
ItemInsertLocation="Beginning"
DataKeyField="ItemID"
SortOrderField="Priority">
<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") %>' ValidationGroup="edit" />
<asp:TextBox ID="TextBox3" runat="server" Text='<%# Bind("Description") %>' ValidationGroup="edit" />
<asp:TextBox ID="TextBox4" runat="server" Text='<%# Bind("Priority") %>' ValidationGroup="edit" />
</div>
</EditItemTemplate>
<ReorderTemplate>
<asp:Panel ID="Panel2" runat="server" CssClass="reorderCue" />
</ReorderTemplate>
<DragHandleTemplate>
<div class="dragHandle"></div>
</DragHandleTemplate>
<InsertItemTemplate>
<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") %>' ValidationGroup="add" />
<asp:Button ID="Button1" runat="server" CommandName="Insert" Text="Add" ValidationGroup="add" />
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ValidationGroup="add"
ErrorMessage="Please enter some text" ControlToValidate="TextBox1" />
</asp:Panel>
</div>
</InsertItemTemplate>
</asp:ReorderList>
</div>
<asp:ObjectDataSource ID="ObjectDataSource1" runat="server" DeleteMethod="Delete"
InsertMethod="Insert" OldValuesParameterFormatString="original_{0}" SelectMethod="Select"
TypeName="SessionTodoXmlDataObject" UpdateMethod="Update">
<DeleteParameters>
<asp:Parameter Name="Original_ItemID" Type="Int32" />
</DeleteParameters>
<UpdateParameters>
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="Description" Type="String" />
<asp:Parameter Name="Priority" Type="Int32" />
<asp:Parameter Name="Original_ItemID" Type="Int32" />
</UpdateParameters>
<InsertParameters>
<asp:Parameter Name="Title" Type="String" />
<asp:Parameter Name="Description" Type="String" />
<asp:Parameter Name="Priority" Type="Int32" />
</InsertParameters>
</asp:ObjectDataSource>
</ContentTemplate>
</asp:UpdatePanel>
</div>
</form>
</body>
</html>
Load the page in browser looks like as follows
See how easy that was ?
Not as Easy When we,
We migrated our web sites to
Server Intellect over one weekend and the setup was so smooth that we were up and running right away. They assisted us with everything we needed to do for all of our applications. With
Server Intellect's help, we were able to avoid any headaches!
Thank you for reading our tutorial on AJAX Controls, we aim to provide the best AJAX tutorials. Learning AJAX in ASP.NET is easy and we hope you are getting your hands dirty by trying different things and coming up with your own ideas. If you have any questions or concerns, please feel free to suggest a tutorial or you can comment below in the comments section.
AJAXTutorials.com
