ATLAS Control ToolKit ReorderList problems

July 30, 2006 @ 1:35 am

I’ve been mucking around with the ReorderList control in the ATLAS Control Toolkit. I’ve been meaning to add some ‘visual resorting’ content to a couple of my applications and I’m trying to figure out whether this control might fit the bill in this and several other applications as a somewhat generic re-arranging mechanism.

The control basically allows you to bind a list or data to the control and then lets you re-arrange that list by dragging and dropping, which is very cool from a UI perspective. I’ve built sorting functionality in a few applications before using AJAX (non-ATLAS) and while I got it to work it was a bit of a pain to build. Here’s an example of one of the apps that does this:

http://www.west-wind.com/webstoresandbox/admin/SpecialsManager.aspx

It works but it wasn’t exactly trivial to build this thing, and functionally it’s really not nearly as nice as being able to drag and drop items around. It's also not resusable in anyway.

So the ATLAS Toolkit Reoderlist certainly sounds interesting if for nothing else to come up with a good pattern for handling reorder lists in application, even if it's using that functionality on a separate form.

Unfortunately, I’ve not had much luck with getting this to work well. Here’s what I found.

I installed the release control that is on ATLAS site, which is dated June 20^th. That control actually worked correctly, but it was completely posting back the page on every drag and drop operation which was definitely not what I want to do. While still pretty cool, the fact that the D&D operation causes the page to resubmit kinda defeats the whole purpose of a reorder list. Reordering is a task that really needs to be reasonably quick and interactive and hopefully leave the state of the page intact. Alternately you have to move the operation off to its own page which is an option, but still the whole PostBack thing kind feels funny when it comes to an ‘ATLAS’ control. But it works.

Anyway, after some more looking around I found that the latest versions on CodePlex no longer do full POSTBacks to the server. Unfortunately, now with the client side management of the sorting I can no longer seem to keep the lists in sync between client and server. The version I’m using now is dated July 27^th(1943) but I saw the same behavior with earlier builds (July 20^th and forward).

With the move to client side sorting of the control it seems the behavior has drastically changed and I’ve run into major problems with the server staying in sync with the client side. The control exhibits some ‘unconventional’ behaviors. For example, it’s a list control yet it doesn’t manage the list content in ViewState. It also appears that the control has some issues in passing ViewState back properly to the page if you manage your own Viewstate.

To check out the control I created a very simple example, that takes a generic list of color strings and stores them to the list and then sorts them. I purposefully didn’t want to use data bound values because using lists like this might provide a way to provide a somewhat generic mechanism for sorting items. I think if databound data is used this sort of thing would actually work ok as the data would get updated into a database and then rebound on Page_Load().

In this case however the content of the output is managed on the page view ViewState.

Here’s what I ended up with:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="SortList.aspx.cs" Inherits="AjaxAspNet.SortList" %>

<%@ Register Assembly="AtlasControlToolkit" Namespace="AtlasControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<title>Reorder List with List</title>

.itemdiv { background: steelblue;

color: cornsilk;

border: solid 1px black;

padding: 5px;

}

#lstCustomers li

{

list-style-type: none;

}

</style>

</head>

<body>

<atlas:ScriptManager ID="ScriptManager" runat="server" EnableScriptComponents="true" EnablePartialRendering="true" >

</atlas:ScriptManager>

<div>

<h1>ATLAS Control ToolKit Sort List</h1>

<a href="..\default.aspx">Home</a> | <a href="SortList.aspx">Reload Page</a><small> | Rendered: <%= DateTime.Now %></small>

<br />

<cc1:ReorderList ID="lstCustomers" runat="server" OnItemReorder="lstCustomers_ItemReorder"

LayoutType="Table" AllowReorder="true" >

<%# Container.DataItem %>

</div>

</ItemTemplate>

</ReorderTemplate>

</cc1:ReorderList>

<atlas:UpdatePanel runat="server" id="MessagePanel" Mode="Always" >

<hr />

<asp:Button runat="server" ID="btnAccept" Text="Apply" OnClick="btnAccept_Click" />

</div>

<asp:Label runat="server" ID="lblMessage" enableviewstate="false"></asp:Label><br />

</ContentTemplate>

</atlas:UpdatePanel>

<br />

<hr />

</form>

</body>

</html>

The code beside then looks like this:

public partial class SortList : System.Web.UI.Page

{

const string STR_SortString = "SortString_Val";

protected List<string> SortString = null;

protected void Page_Load(object sender, EventArgs e)

{

SortString = ViewState[STR_SortString] as List<string>;

if (SortString == null)

{

SortString = new List<string>();

SortString.Add("Red");

SortString.Add("Green");

SortString.Add("Purple");

SortString.Add("DarkBlue");

SortString.Add("Orange");

SortString.Add("Pink");

SortString.Add("Brown");

SortString.Add("GoldenRod");

}

this.lstCustomers.DataSource = SortString;

this.lstCustomers.AllowReorder = true;

this.lstCustomers.DataBind();

}

protected void lstCustomers_ItemReorder(object sender, AtlasControlToolkit.ReorderListItemReorderEventArgs e)

{

//string New = SortString[e.NewIndex];

//string Old = SortString[e.OldIndex];

//if (e.NewIndex > e.OldIndex)

//{

// SortString.RemoveAt(e.NewIndex);

// SortString.Insert(e.NewIndex, Old);

//}

//else

//{

// SortString.Insert(e.NewIndex, Old);

// SortString.RemoveAt(e.NewIndex + 1);

//}

//SortString[e.OldIndex] = New;

//*** Have to rebind to show the changes

this.lstCustomers.DataSource = SortString;

this.lstCustomers.DataBind();

ViewState[STR_SortString] = SortString;

}

protected override void OnPreRender(EventArgs e)

{

base.OnPreRender(e);

ViewState[STR_SortString] = SortString;

}

protected void btnAccept_Click(object sender, EventArgs e)

{

ShowSortItems();

}

protected void ShowSortItems()

{

StringBuilder sb = new StringBuilder();

foreach (string Color in this.SortString)

{

sb.Append(Color + " | ");

}

this.lblMessage.Text = "<br /> You're sorted choices: <br /><b>" + sb.ToString() + "</b>";

}

Here’s what happens:

The control renders the color list fine. On Reorder the list rebinds and then the Reorder event fires. The Control accurately reorders the SortItems inside of the event, so without making any manual changes to the list values (the commented out code which I originally wrote but isn’t necessary) the list is automatically re-ordered for you. That part is very cool! Very little work to get this far.

After re-sorting I stick the newly sorted list back into ViewState for the next request, and I also rebind the list so that the list reflects the latest values. On the first hit all looks OK.

However, on the next reorder, the value retrieved from ViewState is no longer correct. The list comes back in its original state, which seems to suggest the Reorder event callback did not update ViewState. That sucks and breaks this whole scheme.

But what sucks even more is that the list now has the wrong values on the server, yet displays the ‘right’ order on the client, and consecutive re-orders only mangle the list even further. The problem is that the

Ok, so for kicks I switched to using the Session object, which then persists on the server. Now I get the first move to work Ok and the Session object correctly returns my now sorted list and I can rebind the sorted list. However, now when a ItemReorder event occurs the list order is completely screwed up and out of whack. I get the item I just moved in the right position but the rest of the list is all wrong.

The problem here is that it’s not clear exactly on what should be bound to the control.

The control doesn’t do ViewState internally, so it has to be rebound every time. If you don’t rebind, the list doesn’t show. So you need to rebind every time. But what do you rebind? The original list? The resorted list? I’ve tried both and neither seems to result in the right output.

To check this out I changed ViewState to Session state. When I use Session with stored values I see the first sorting operation work correctly but any subsequent sort operations completely mangle the list. It seems that the last sorted item always ends up in the right spot but the rest of the list simply ‘migrates’ around (I can’t seem to see a pattern in how)…

I’d be curious to hear if anybody has used this control with recent builds and if you have, have you used anything but direct data binding as they are doing in the samples which use data source controls to perform the updates automatically…

Feedback for this Weblog Entry

re: ATLAS Control ToolKit ReorderList problems
by bdiaz July 30, 2006 @ 9:24 am

I ran across this the other day and thought it might be part of what you are experiencing:

http://blogs.msdn.com/sburke/archive/2006/07/21/674261.aspx

Regards,
Bobby

Interesting Finds: July 30, 2006
by Jason Haley July 30, 2006 @ 9:40 am

re: ATLAS Control ToolKit ReorderList problems
by Shawn Burke July 31, 2006 @ 3:22 pm

Yeah - looks like I screwed this up. Sorry for the pain, but thanks for the prod and the example.

There's a couple of issues here. Keeping the two sides in sync is a bit tough, but the code was just plain broken. Not sure how it managed to pass the testing I did (I swear!) on it. In any case, it should handle your scenario now.

Except for one thing - callbacks are kind-of-mostly-cool except for one thing: they're one-directional. So the ViewState thing will never work, but not because of the ReorderList. See, there's this blob of ViewState on the client. The callback sends that back to the server, and your server code tweaks on it. But because the page doesn't refresh (it just gets the callback), it's viewstate never gets updated. So the next time you do the callback, you'll get the original state, as you've discovered.

re: ATLAS Control ToolKit ReorderList problems
by Shawn Burke July 31, 2006 @ 3:23 pm

Oh - I've checked in my changes as 2058 if you want to pull them down. Let me know if your scenario is still broken. Using your test page above, it seemed to be working OK.

re: ATLAS Control ToolKit ReorderList problems
by Rick Strahl July 31, 2006 @ 3:56 pm

Hey Shawn, thanks for checking this out. I'll try this again later with the latest build.

I thought ATLAS DOES deal with ViewState in callbacks normally. In those controls ViewState gets updated as part of the delta values that go back to the client. UpdatePanel and Timer etc. do, so I assumed that was going to work with these controls as well.

That's Ok if it doesn't actually - in most cases the I suspect the data would come from a database anyway and so you'd have to rebind...

But can you clarify on how this is supposed to work? When you bind - are you supposed to re-bind the list after a change is made to effectively get the new values on the client?

See I see a real problem here in that the control reorders without any consideration as to what happens on the server. The server may decide - you can't drop here, or may decide to reorder in a different fashion somehow. The Reorder event after all fires a Old and New order index value so that seems to suggest that you can do some sort of custom arranging with the data.

But if the mechanism is truly one way and the ReorderList doesn't update its rendered state from the callback (ie. you rebind and the HTML of the list goes back to the client) then that will really not have any effect at all.

That's not necessarily bad, but that really needs to be documented because it's not clear just from looking at the control <s>...

re: ATLAS Control ToolKit ReorderList problems
by jods August 16, 2006 @ 3:30 am

I think that one needs to refresh the GUI on the ReorderList. At the very least, this should be a property, e.g. "UseReorderCallbacks".

Using a callback to save the change is not always an acceptable solution. Here's why:
1. My item template has some buttons with "Edit", "Delete" commands. If I reorder one item, and click on a button, it's ANOTHER item which gets edited/deleted! Probably because the List and the Viewstate aren't in synch.
2. I use alternate rows on my list. When reordering, the colors must be updated.

I'd like to ReorderList to work as it did before (at least make it configurable), and make it work inside an UpdatePanel to allow fast and flicker-free updates. (Partial rendering is almost like a callback, in many respects)

re: ATLAS Control ToolKit ReorderList problems
by Rick Strahl August 16, 2006 @ 12:02 pm

I agreee... I'd really like to see three different modes:

Postback mode
Callback mode
All Client Mode with completion Callback

The first was the original behavior and that has its place I suppose. The second is how it works now - a callback occurs on every reorder, but the client and server can get out of sync.

THe last would allow reordering without any events until you're done reordering (by firing an event or clicking a button) and THEN updating the server.

I don't think that'll happen though <g>...

re: ATLAS Control ToolKit ReorderList problems
by Jon Tackabury August 17, 2006 @ 9:54 am

Hey Rick, did you ever get these problems worked out? I'm having the same data binding issues you are, and I'm unsure of how to work with the list and keep it in sync with the server. Curious to know if you've discovered anything new.

Thanks,
Jon

DotNetSlackers: ATLAS Control ToolKit ReorderList problems
by DotNetSlackers Latest ASP.NET News October 09, 2006 @ 10:10 am

ASP.NET Forums - ReorderList Control Resets
by AJAX Control Toolkit October 10, 2006 @ 11:02 am

ReorderList Control Resets - ASP.NET Forums
by ASP.NET Forums May 21, 2007 @ 2:38 am

re: ATLAS Control ToolKit ReorderList problems
by YAR July 12, 2007 @ 6:53 pm

I having the problem after reordering the list in Recordlist. In the view the order is as per reorder one, but when I look at collection of item while debug its in original format. it's not maintaning the viewstate

re: ATLAS Control ToolKit ReorderList problems
by Eric Matsuno August 06, 2007 @ 5:50 pm

Wow. what a confusing control. Viewstate is all screwed up with this control. It appears that Viewstate does not function except for initial binding and "submit" functionality. All interaction with the drag/drop is lost in space.

THe trick is in keeping the logic when the Reorder event fires:

protected void Items_ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
CollectionItem item = ItemCollection[e.OldIndex];
ItemCollection.RemoveAt(e.OldIndex);
ItemCollection.Insert(e.NewIndex, item);
int i=1;
foreach (CollectionItem updateItem in ItemCollection)
{
updateItem.UpdateOrder(i++);
}
}
**Sorry to keep this short, but if you don't understand this, then look up List<> for more details:

re: ATLAS Control ToolKit ReorderList problems
by Edmund Ward September 21, 2007 @ 10:42 am

I still can't get this to work despite these learned musings. Eric, I'm afraid I didn't understand your post. I'm trying to offer a simple list of items that the use can reorder. When he's finished I'm going to save the lot as a CSV string. This is just one part of a very large form, so I'm not binding the list to a db directly, but saving the whole form to an object and thence through a business layer, DAL, etc. I can populate and bind the reorderList control with values already in the CSV field from the db record, but as soon as I start reordering I get the old client-and-server-are-out-of-sync problem. How do I save the final state of the list? It's driving me nuts. I tried putting the csv string in a hidden field and updating this field value when the OnReorder event is fired, and although the event is firing as expected, and the hidden field value is correctly altered just before leaving the OnReorder method, when we next come back to the OnReorder method, the value of the hidden field has magically reverted back to the very original version. This screws up things horribly. Here's my OnReorder method:

protected void rlManOptions_ItemReorder(object sender, ReorderListItemReorderEventArgs e)
{
    // only do something if the new position is different
    if (e.OldIndex != e.NewIndex)
    {
        List<string> currentManOpts = new List<string>();
        foreach (string thisOpt in hfManOptions.Value.Split(','))
        {
            currentManOpts.Add(thisOpt);
        }

        string Old = currentManOpts[e.OldIndex];

        // go through each member of the array and adjust indexes for the new array
        if (e.NewIndex > e.OldIndex)
        {
            currentManOpts.RemoveAt(e.OldIndex);
            currentManOpts.Insert(e.NewIndex, Old);
        }
        else
        {
            currentManOpts.Insert(e.NewIndex, Old);
            currentManOpts.RemoveAt(e.NewIndex + 1);
        }

        // Reset the hidden field
        hfManOptions.Value = "";

        foreach (string thisOpt in currentManOpts)
        {
            if (hfManOptions.Value.Length > 0)
            {
                hfManOptions.Value += ",";
            }
            hfManOptions.Value += thisOpt;
        }
    }
}

hfManOptions is my hidden field. Otherwise the aspx is very similar to that used in the Samples project of the ASP.NET Ajax Control Toolkit, except that I've got the ReorderList and hidden field in an UpdatePanel.

Has anybody got a solution for this?

re: ATLAS Control ToolKit ReorderList problems
by Larry Aultman November 03, 2007 @ 2:05 pm

I have been messing with this thing a couple days. I am having no problems with the control until I get to the point where my user (me) wants to save changes back to my datastore.

I really don't want the control to do anything except rearrange things on the screen and track its own index. When I hit the update button I just want to access the ReorderListCollection so that I can determine the current indexes of item in the collection.

I am storing a List<complexObject> in the list. For the life of me I can't get the control to let me look at the contents of the list.

I can't find an event that lets me get at the collection...

How can you examine the collection?

Larry

re: ATLAS Control ToolKit ReorderList problems
by Larry Aultman November 03, 2007 @ 2:09 pm

Nevermind... the OnRender event does it. My List<complexObject> is valid at this point.

I am off to see if I can fix this dumb thing.

Larry

re: ATLAS Control ToolKit ReorderList problems
by Larry Aultman November 03, 2007 @ 2:22 pm

Oh well this thing just plain sucks. You just can't get at the collection. It doesn't play by any of the normal rules for lists and such.

Ordinarily, you save an List<> in a collection and then later extract the List<> items by casting the collection to the proper type. Not this thing.

I believe that the developers have a BIT more work to do to make it worth something. Looks pretty. Other than that it pretty much sucks.

Larry

re: ATLAS Control ToolKit ReorderList problems
by Larry Aultman November 03, 2007 @ 8:04 pm

There is a way. It kicked my butt for two days. I wanted to bring in some data using a LINQ query into a List<myobject> then display the list on the screen and let users drag the items into the order that they desired.

In my case my Linq query pulls some data from some tables to create a data object that is stored in a List<myobject>. I like Linq. The database has its own sorting field that IS NOT the row index which could be from all over the map after a typical query. Therefore sorting the database is pointless, what matters is that the sorting field values are in sequence order NOT the actual rows. Again in my case the List<myobject> is a composite of data from several sql tables.

So I want to show some data let the user move it up or down and then when he's done save its order.

When finished I wanted them to be able to click a save button to persist the current state. I would then do my database magic to set the ordering fields in the correct sequence.

After all kinds of trials and errors and because this (my usage) happens to be a VERY low impact on the server resources I decided to save the List<myobject> in the session. The tricky part is getting it in and out of the session.

Here is my solution:

protected List<myobject> menuDefList = null;
protected void Page_Load(object sender, EventArgs e)
{
if (!Page.IsPostBack)
{
// stuff here doesn't matter... // you could load your ReorderList control here, I didn't because of how my application flows.
}
if (Page.IsCallback)
{
// This is NOT called on initial page load. The Reorderlist will use the Callback function this will re-bind the control to the session object // and somewhere down in the guts of the control it will unravel the previous order which then seems to update the source which is the session object.
// Holding the last Reorderlist drag-drop in the session
menuDefList = Session["cms_MpMainMenuDefinition_Items"] as List;
ReorderList1.DataSource = menuDefList;
ReorderList1.DataBind();
}
}

//In my case I use a button to load(bind) the ReorderList you could put this in the page load above.

protected void btnOrderTopMenu_Click(object sender, EventArgs e)
{
menuDefList = null; //make sure it is empty
menuDefList = gASAX.Get_cms_MpMainMenuDefinitionItems(menuTreeIndex, topMenuParentID); //gASAX is my database class
// Save the current order in the session on the first pass. This is the only way I have found to persist the values.
Session["cms_MpMainMenuDefinition_Items"] = menuDefList;
ReorderList1.DataSource = menuDefList; // now bind to the data
ReorderList1.DataBind();
}

// When the user clicks the Save button...

protected void btnOrderSave_Click(object sender, EventArgs e)
{
menuDefList = Session["cms_MpMainMenuDefinition_Items"] as List;
gASAX.Save_cms_MpMainMenuDefinitionItems(menuDefList); //dASAX is my class that talks to the database

// I now have an order list object whose item index can be used to set my sortOrder field in the database
}

Hope this will save you some time.

re: ATLAS Control ToolKit ReorderList problems
by Mike December 19, 2007 @ 2:46 pm

Thanks Larry Aultman!!

re: ATLAS Control ToolKit ReorderList problems
by Shawn Dorman December 27, 2007 @ 11:20 pm

Larry/Mike,

I'm hoping that one of you (or anyone, I guess) can help me with my issue.
I've created a reorderlist and have bound it to a List<myItem> very similar to your example. But, I cannot get the callback logic to fire. My reorderlist is defined as follows:

        <ajaxToolkit:ReorderList ID="ProductList" runat="server" 
            CallbackCssStyle="ReorderList"
            DragHandleAlignment="Left" 
            DataKeyField="ID"
            SortOrderField="DisplayOrder"
            LayoutType="table"
            AllowReorder="true"
            >
            <ItemTemplate>
                <table cellspacing="0" cellpadding="0" style="height:70px">
                    <tr class="cssTR">
                        <td valign="top" class="cssITD">
                            <asp:Image ID="Image2" CssClass="cssImg" runat="server" ImageUrl="/App_Themes/ControlPanelDefault/images/dragdropicon.gif" />
                        </td>
                        <td valign="top" class="cssTD2">
                            <div class="cssName"><%#Eval("name") %></div><%#Eval("shortDescription").ToString()%>                        
                            <asp:HiddenField runat="server" ID="ID" Value='<%#Bind("ID")%>' />
                            <asp:HiddenField runat="server" ID="DisplayOrder" Value='<%#Bind("DisplayOrder")%>' />
                        </td>
                    </tr>
                    <tr><td /><td><img src="userImages/1x1.gif" width="666" height="1" /></td></tr>
                </table>
            </ItemTemplate>
            <EmptyListTemplate>
            </EmptyListTemplate>
            <ReorderTemplate>
            </ReorderTemplate>
        </ajaxToolkit:ReorderList>

Any help would be greatly appreciated! Thank you!!!

re: ATLAS Control ToolKit ReorderList problems
by Joe Bohn January 09, 2008 @ 10:43 am

the following is the best "business logic" I can come up with for how to use the reOrderList behind the scenes, not using inline sql, performing all updates at one time, not every time the reorderlist is reordered. The following will enable you to store the reOrderList as an array as you go, then update the db at the click of a button once all reOrdering is complete. The following assumes that you're using c#:

1) using AjaxControlToolkit; // be sure to include this on the code behind page or your event handler wont work!

2)
protected void ItemReorder(object sender, AjaxControlToolkit.ReorderListItemReorderEventArgs e)
{
// put your code in here that updates your array, cookie, session, db..
// if you already have the content of the reOrderList in an array, then you will reference
// your function that swaps the array values here
// by postback time, all of the reOrdering has finished and you can update the db!
oldPosition = e.OldIndex; // the old index (position #1 is 0)
newPosition = e.NewIndex; // the new index
// basically, the items at both Indexes swap places
}

3) use AllowReorder="True" PostBackOnReorder="true" on the reOrderList Control

4) use OnItemReorder="ItemReorder" where ItemReOrder is the name of the event that swaps the indexes of items

5) on !Page.IsPostBack (not the same as clicking the update button), update the array, adjust the reOrderList to reflect changes to the array but not made in db yet.

6) on Page.IsPostBack (when the page is first launched), create the array

7) When the user clicks the "Update button," update the db with the array.

re: ATLAS Control ToolKit ReorderList problems
by Chris Hammond January 29, 2008 @ 2:32 pm

Joe Bohn, I'm assuming you mean Page.IsPostBack instead of !Page.IsPostback, and the other way around for item 6.

re: ATLAS Control ToolKit ReorderList problems
by Leon June 05, 2008 @ 7:15 am

I think I found a small error in the code that would prevent the list from properly sorting if an item is moved up in the list

if (e.NewIndex > e.OldIndex)
        {
            currentManOpts.RemoveAt(e.OldIndex);
            currentManOpts.Insert(e.NewIndex, Old);
        }
        else
        {
            currentManOpts.Insert(e.NewIndex, Old);
            currentManOpts.RemoveAt(e.NewIndex + 1);
        }

Should be

if (e.NewIndex > e.OldIndex)
{
currentManOpts.RemoveAt(e.OldIndex);
currentManOpts.Insert(e.NewIndex, Old);
}
else
{
currentManOpts.Insert(e.NewIndex, Old);
currentManOpts.RemoveAt(e.OldIndex + 1); //<----------------- Need to use OldIndex
}