advanced web statistics

SqlDataSource and AJAX Reorder List from Codebehind

12/12/2006 4:21:48 PM

There was a member on the ASP.NET Forums having problems programmatically accessing a SqlDataSource and ReorderList on his form. I could not find the post again so I will post my reply here.  He was creating a SqlDataSource in his code-behind file and then adding it to a PlaceHolder control with no luck. 

If you are reading this and you are the person in question (or you are not and are having the same problem) then the following example should help you.

First I added both the ReorderList and SqlDataSource controls to the form as shown below.

<form id="form1" runat="server">

<asp:ScriptManager ID="ScriptManager1" runat="server" />

<ajax:ReorderList ID="ReorderList1" runat="server">
   <ItemTemplate>
      <!-- ... -->
   </ItemTemplate>
</ajax:ReorderList>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" />

</form>

Then in your code-behind for that page edit the controls.

protected void Page_Load(object sender, EventArgs e)
{
   if (!Page.IsPostBack)
   {
      EditSqlDataSource();
      EditReorderList();
   }
}

private void EditReorderList()
{
   ReorderList1.AllowReorder = true;
   ReorderList1.CssClass = "ReOrderControlStyle";
   ReorderList1.DataSourceID = "SqlDataSource1";
   ReorderList1.DataKeyField = "KeyField";
   ReorderList1.DragHandleTemplate = "";
   ReorderList1.DragHandleAlignment = ReorderHandleAlignment.Left;
   ReorderList1.ItemInsertLocation = ReorderListInsertLocation.Beginning;
   ReorderList1.SortOrderField = "SortField"
   ReorderList1.LayoutType = ReorderListItemLayoutType.Table;
   ReorderList1.PostBackOnReorder = false;
}

private void EditSqlDataSource()
{
   SqlDataSource1.ConnectionString = "ConnectionString";
   SqlDataSource1.SelectCommand = "SELECT * FROM ...";
   SqlDataSource1.UpdateCommand = "UPDATE ... SET ...";
   SqlDataSource1.OldValuesParameterFormatString = "format";
   SqlDataSource1.UpdateParameters.Add(new Parameter("foo"));
   SqlDataSource1.UpdateParameters.Add(new Parameter("bar"));
}

Almost forgot...

using AjaxControlToolkit;

Easy.

AJAX, C#, Code, Tools

kick it on DotNetKicks.com

Comments


I have implemented this code and the list renders properly, but when I click in an item to drag it reorder the list, it just selects the text and will not let you drag it.

Any ideas on why?

thanks for anything I can use.


Posted by: James | 2/15/2007 11:51:12 AM

James,

I have no idea why. To tell you the truth I don`t use the Reorder List control as I have rolled my own version of it. I posted this to help someone from ASP.NET Forums.

Sorry I couldn`t be of more help.

- will

Posted by: Will | 2/16/2007 1:37:37 PM

James,

The code example has no drag handle. Add a drag handle template.

Posted by: Adam | 2/21/2007 5:27:40 AM

Good catch Adam. Thanks!

- will

Posted by: Will | 2/22/2007 6:19:11 PM

There is a error for this code

ReorderList1.DragHandleTemplate = "";

Cannot implicitly convert type `string` to `System.Web.UI.ITemplate`

can you help me ?

Posted by: skymoon | 3/17/2008 11:21:35 AM

hi i am using reorderlist in one of my pages and i have a checkbox control in my reorderlist...i am using this control so tat i can select a pirticular item and delete it but i dont know how to go abt it using my deletebtn event
please can u help me out thank you

Posted by: arthi | 6/20/2008 11:20:23 AM

I am making reorderlist and sql datasource from code behind. the problem I`m facing is updating the reorder field.. if u can help on it, i can send you the code ..

thank you

Posted by: shivam | 7/30/2008 1:43:39 PM

I actually think the AJAX.NET ReorderList sucks (big time) and no longer use it.

This blog entry supplied limited help to those that used it.

Sorry I couldn`t help you more!

Posted by: Will Asrari | 7/30/2008 1:49:31 PM

I encounter the same problem and here what do to solved my problem

1. add DragHandleTemplate after reordertemplate

<ReorderTemplate>
... </ReorderTemplate>
<DragHandleTemplate>
<div class="dragHandle" ></div>
</DragHandleTemplate>


2 add following code in your css style sheet

/*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;
}

.reorderListDemo li a {color:#FFF !important; font-weight:bold;}

.reorderCue {
border:dashed thin black;
width:100%;
height:25px;
}

I got it work !

Posted by: tron | 8/13/2008 5:10:13 AM

Leave a Comment

   

  Enter the text to proceed!