ReorderList demo for AjaxControlToolkit

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

<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 powered by Disqus