Drag and Drop in .Net c#
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开发者_JAVA百科="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
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.
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;
}
}
精彩评论