AjaxControlToolkit ReorderList不起作用

时间:2012-04-10 08:44:34

标签: c# asp.net drag-and-drop ajaxcontroltoolkit reorderlist

我需要使用拖动和放大器放下控件来订购列表。我想通过AjaxControlToolkit中的ReorderList控件来实现这一点。我已经尝试了一切来使它工作,但它不会。一切都顺利,如填充列表等。但我不能使用这个控件应该使用它。加载页面时,它会显示一个列表,左侧有一个reordergrip,但是当我尝试拖动一个项目时,它不会拖动。它只是留在原地。我也尝试过其他浏览器,如IE9& Firefox浏览器。有人可以帮我解决这个问题吗?我在Visual Studio 2010中使用ASP.NET / C#。

提前谢谢!

ASPX:

    <asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
    <asp:UpdatePanel ID="UpdatePanel1" runat="server">
        <ContentTemplate>
        <div class="ajaxOrderedList">
            <asp:ReorderList runat="server" DataSourceID="SqlDataSource1" ID="rlData" PostBackOnReorder="true" DragHandleAlignment="Left" ItemInsertLocation="Beginning" SortOrderField="Naam" AllowReorder="true">
                <DragHandleTemplate> 
                    <asp:Panel ID="dragHandle" runat="server" 
                        style="height: 20px; width: 20px; border: solid 1px black; background-color: Red; cursor: pointer;" 
                        Visible="<%# ShowDragHandle %>">
                        &nbsp;
                    </asp:Panel>
                    </DragHandleTemplate> 
                <ItemTemplate>
                    <div class="itemArea"> 
                        <asp:Label ID="lblNaam" runat="server" Text='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("Naam")))  %>' />
                        <asp:Label ID="lblFunctie" runat="server" Text='<%#  HttpUtility.HtmlEncode(Convert.ToString(Eval("Functie")))  %>' />
                    </div>
                </ItemTemplate>
                <ReorderTemplate>
                    <div style="width: 300px; height: 20px; border: dotted 2px black;">
                        &nbsp;
                    </div>
                </ReorderTemplate>
            </asp:ReorderList>
            </div>
        </ContentTemplate>
    </asp:UpdatePanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server" 
    ConnectionString="<%$ ConnectionStrings:testdataConnectionString %>" 
    SelectCommand="SELECT [id], [naam], [functie] FROM [personen]" DeleteCommand="DELETE FROM [personen] WHERE [id] = @intID"
                InsertCommand="INSERT INTO [personen] ([naam], [functie]) VALUES (@strNaam, @strFunctie)"
                UpdateCommand="UPDATE [personen] SET [naam] = @strNaam, [functie] = @strFunctie WHERE [id] = @intID">
                <DeleteParameters>
                <asp:Parameter Name="intID" Type="Int32" />
            </DeleteParameters>
            <UpdateParameters>
                <asp:Parameter Name="strNaam" Type="String" />
                <asp:Parameter Name="srtFunctie" Type="String" />
                <asp:Parameter Name="intID" Type="Int32" />
            </UpdateParameters>
            <InsertParameters>
                <asp:Parameter Name="strNaam" Type="String" />
                <asp:Parameter Name="srtFunctie" Type="String" />
            </InsertParameters>
</asp:SqlDataSource>

代码背后:

DataView MyDView = null; 

        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                ShowDragHandle = true;
            }
        }

        protected void ReorderList1_ItemReorder(object sender, ReorderListItemReorderEventArgs e)
        {
            ShowDragHandle = true;
        }

        protected Boolean ShowDragHandle { get; set; }


        protected void Page_PreInit(object sender, EventArgs e)
        {
            //set theme
            this.Theme = "ServiceSuite";
        }

不工作的图像重新订单(如果我尝试拖动项目,这就是我得到的内容):

This is what I get if I try to drag an item!

2 个答案:

答案 0 :(得分:4)

尝试将此添加到您的重新订单列表属性

ClientIDMode="AutoID"

答案 1 :(得分:0)

我在使用旧版本的AjaxControlToolkit时遇到了同样的问题。它似乎是在当前版本(2012年9月)中修复的,当然我不能在我的项目中使用它。但也许更新会帮助其他人。