ASP.NET (snapshot 2017) Microsoft documentation and samples

Using Postbacks with ReorderList (C#)

The ReorderList control in the AJAX Control Toolkit provides a list that can be reordered by the user via drag and drop. Whenever the list is reordered, a postback shall inform the server of the change.

Overview

The ReorderList control in the AJAX Control Toolkit provides a list that can be reordered by the user via drag and drop. Whenever the list is reordered, a postback shall inform the server of the change.

Steps

There are several possible data sources for the ReorderList control. One is to use an XmlDataSource control:

[!code-aspxMain]

   1:  <asp:XmlDataSource ID="XmlDataSource1" runat="server" XPath="acronym/letter">

   2:   <Data>

   3:   <acronym>

   4:   <letter char="A" description="Asynchronous" />

   5:   <letter char="J" description="JavaScript" />

   6:   <letter char="A" description="And" />

   7:   <letter char="X" description="XML" />

   8:   </acronym>

   9:   </Data>

  10:  </asp:XmlDataSource>

In order to bind this XML to a ReorderList control and enable postbacks, the following attributes must be set:

DataSourceID: The ID of the data source
SortOrderField: The property to sort by
AllowReorder: Whether to allow the user to reorder the list elements
PostBackOnReorder: Whether to create a postback whenever the list is rearranged

Here is the appropriate markup for the control:

[!code-aspxMain]

   1:  <ajaxToolkit:ReorderList ID="rl1" runat="server" SortOrderField="char"

   2:   AllowReorder="true"

   3:   DataSourceID="XmlDataSource1" PostBackOnReorder="true">

Within the ReorderList control, specific data from the data source may be bound using the Eval() method:

[!code-aspxMain]

   1:  <DragHandleTemplate>

   2:   <div class="DragHandleClass">

   3:   </div>

   4:   </DragHandleTemplate>

   5:   <ItemTemplate>

   6:   <div>

   7:   <asp:Label ID="ItemLabel" Text='<%# Eval("description") %>' runat="server" />

   8:   </div>

   9:   </ItemTemplate>

  10:  </ajaxToolkit:ReorderList>

At an arbitrary position on the page, a label will hold the information when the last reordering occurred:

[!code-aspxMain]

   1:  <div>

   2:   <asp:Label ID="lastUpdate" runat="server" />

   3:  </div>

This label is filled with text in the server-side code, handling the postback:

[!code-aspxMain]

   1:  <script runat="server">

   2:   void Page_Load()

   3:   {

   4:   if (Page.IsPostBack)

   5:   {

   6:   lastUpdate.Text = "List last reordered at " +

   7:   DateTime.Now.ToLongTimeString();

   8:   }

   9:   }

  10:  </script>

Finally, in order to activate the functionality of ASP.NET AJAX and the Control Toolkit, the ScriptManager control must be put on the page:

[!code-aspxMain]

   1:  <asp:ScriptManager ID="asm" runat="server" />

Each reordering triggers a postback (Click to view full-size image)

Next

Comments (

)

<00> <01> <02> <03> <04> <05> <06> <07> <08> <09> <10> <11> <12> <13> <14> <15> <16> <17> <18> <19> <20> <21> <22> <23>

Link to this page: //www.vb-net.com/AspNet-DocAndSamples-2017/aspnet/web-forms/overview/ajax-control-toolkit/reorderlist/using-postbacks-with-reorderlist-cs.htm