draptik

mostly tech stuff

ReorderList Demo for AjaxControlToolkit

AjaxControlToolkit’s ReorderList provides drag and drop functionality within a list.

ReorderListDemo.aspxSource Article
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<div class="CssReorderList">
    <!-- ClientMode="AutoID" is required for certain versions of AjaxControlToolkit  -->
    <ajaxToolkit:ReorderList ID="MyReorderList" runat="server"
                             DataKeyField="MyId"
                             SortOrderField="MyPosition"
                             PostBackOnReorder="False"
                             ClientIDMode="AutoID"
                             DragHandleAlignment="Left"
                             ItemInsertLocation="Beginning"
                             AllowReorder="true"
        >
        <ItemTemplate>
            <div style="background-color: yellow;" class="CssItemArea">
                <asp:HiddenField runat="server" ID="hdfMyId"
                  Value="<%# ((DummyViewModel)Container.DataItem).MyId %>" />
                <asp:Label runat="server" ID="lblName"
                  Text="<%# ((DummyViewModel)Container.DataItem).MyName %>"/>
                <asp:Label runat="server" ID="lblPosition"
                  Text="<%# ((DummyViewModel)Container.DataItem).MyPosition %>"/>
            </div>
        </ItemTemplate>
        <DragHandleTemplate>
            <div class="CssDragHandle"><strong>DRAG ME</strong></div>
        </DragHandleTemplate>
    </ajaxToolkit:ReorderList>
<div>

I’ve placed a working example project on github.

Comments