Drag and Drop in .Net c#

Question

Hi I have implemented a list that i want to be able to order using drag and drop.

I have implemented the list using the ajaxToolkit ReorderList.

It works perfectly on the user interface the problem i am having is related to the update of the data into the database.

I created a button that allows the user to save the changes (all at once), the problem is that in the click event if I loop troughs the ReorderList the items are returned in the original order, not the one as the user have modified it. Seems like despite the list is re-orderd the ReorderList maintains the original datasource.

this is my list

<ajaxToolkit:ReorderList ID="rlVerticalMenu" runat="server" DragHandleAlignment="Left"
          ItemInsertLocation="Beginning" DataKeyField="Id" SortOrderField="Priority"
          EnableViewState="true" OnItemReorder="rlWorkItems_ItemReorder" 
          CallbackCssStyle="ClsCallBackStyle" CssClass="ClsReorderListContainer">          
        <ItemTemplate>                
            <div class="ClsItemArea">
               <div>                    
                    <asp:Label ID="LblId" runat="server" Visible="false" CssClass="editable_textarea" Text='<%# Eval("Id").ToString() %>' />
                    <div class="verticalMenuItem">
                        <asp:Label ID="LblDisplayName" runat="server" CssClass="editable_textarea" Text='<%# Eval("DisplayName").ToString() %>' />
                    </div>
                    <div class="verticalMenuItem">                        
                        <asp:Label ID="LblHref" runat="server" CssClass="editable_textarea" Text='<%# Eval("Href").ToString() %>'/>
                    </div>
                    <div class="verticalMenuItem">                        
                        <asp:Label ID="LblTooltip" runat="server" CssClass="editable_textarea" Text='<%# Eval("Tooltip").ToString() %>'/>
                    </div>
               </div>                                               
            </div>
        </ItemTemplate>
        <ReorderTemplate>
            <asp:Panel ID="Panel2" runat="server" CssClass="ClsReorderCue">
            </asp:Panel>
        </ReorderTemplate>
        <DragHandleTemplate>
            <div class="ClsDragHandle">
            </div>
        </DragHandleTemplate>
    </ajaxToolkit:ReorderList>                       
   <asp:Button ID="BtnGenerateMenu" runat="server" Text="Generate Menu" OnClick="BtnGenerateMenu_Click" />
</asp:Content>

Any idea how I should implement this? How do I implement the

protected void rlWorkItems_ItemReorder(object sender, ReorderListItemReorderEventArgs e)
        {


        }

method?

Thanks

Answer 1

Are you reordering the list using OrderBy, which is a LINQ expression that enumerates the list in an ordered fashion, or by Sort, which actually changes the order of the list?

You might choose to iterate through the list in the click event using OrderBy like so:

var qry = MyList.OrderBy(item => item.OrderingProperty)

In this way, if you loop through qry, you will have a list ordered by the property you specified in your LINQ lambda expression.

Answer 2

I managed to implement a sorting algorithm, i am not sure if there is a better way to do this but it works

protected void rlWorkItems_ItemReorder(object sender, ReorderListItemReorderEventArgs e)
    {

        List<VerticalMenuItem> list = (List<VerticalMenuItem>)Session["VerticalMenuItems"];
        List<VerticalMenuItem> newList = new List<VerticalMenuItem>();

        //if move one place - no matter top or bottom
        if (e.NewIndex - e.OldIndex == 1 || e.OldIndex - e.NewIndex == 1)
        {
            VerticalMenuItem oldItem = list[e.OldIndex];
            VerticalMenuItem newItem = list[e.NewIndex];
            list[e.NewIndex] = oldItem;
            list[e.OldIndex] = newItem;
            Session["VerticalMenuItems"] = list;
            return;
        }
        //From bottom to top
        if (e.OldIndex - e.NewIndex > 0)
        {
            VerticalMenuItem oldItem = list[e.OldIndex];                
            for (int i = 0; i < e.NewIndex; i++)
            {
                newList.Add(list[i]);
            }
            list.Remove(oldItem);
            newList.Add(oldItem);
            for (int i = e.NewIndex; i < list.Count; i++)
            {
                newList.Add(list[i]);
            }
            Session["VerticalMenuItems"] = newList;
            return;
        }
        //From top to bottom
        if (e.OldIndex - e.NewIndex < 0)
        {
            VerticalMenuItem oldItem = list[e.OldIndex];
            list.Remove(oldItem);
            for (int i = 0; i < e.NewIndex; i++)
            {
                newList.Add(list[i]);
            }                
            newList.Add(oldItem);
            for (int i = e.NewIndex; i < list.Count; i++)
            {
                newList.Add(list[i]);
            }
            Session["VerticalMenuItems"] = newList;
        }        
    }