Search code examples
asp.netreorderlist

Ajax reorder list not draggable


I have been trying to get a basic reorderlist working following this guide -> http://www.asp.net/LEARN/Ajax-Control-Toolkit/tutorial-40-vb.aspx. I have tried a demo version and in my browser so it's not a browser problem.

I am on asp.net 2.0 and have installed the AjaxControlToolkit and the DLL file is in the Bin folder.

However when I run the page - I get the list I expect but nothing is draggable, I cannot see what I am getting wrong. It will be part of a more complex page but I have taken it out into a simple page to firgure out what is wrong.

Anyone have any ideas what I may have wrong here?

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="ajaxtest.aspx.cs" Inherits="Admin_ST_ajaxtest" %>

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
    Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <link href="AdminCSS.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <div>
    <asp:SqlDataSource ID="SqlDataSource_LensCatList2" runat="server" 
        ConnectionString="<%$ ConnectionStrings:VS_ConnectionString %>" OldValuesParameterFormatString="original_{0}"
        ProviderName="<%$ ConnectionStrings:VS_ConnectionString.ProviderName %>" 
        DeleteCommand="DELETE FROM [Specs_LensDetailsTbl] WHERE [DBID] = ?" 
        SelectCommand="SELECT Specs_LensDetailsTbl.DBID, Specs_LensDetailsTbl.LensName, Specs_LensCatLookupTbl.OrderNum, Specs_LensCatLookupTbl.Active FROM Specs_LensDetailsTbl LEFT OUTER JOIN Specs_LensCatLookupTbl ON Specs_LensDetailsTbl.DBID = Specs_LensCatLookupTbl.LensDBID WHERE (Specs_LensCatLookupTbl.CatDBID = 1) ORDER BY Specs_LensCatLookupTbl.OrderNum"
        UpdateCommand="UPDATE Specs_LensDetailsTbl SET OrderNum=@OrderNum WHERE [DBID]=@original_id">      
    <UpdateParameters>           
        <asp:Parameter Name="OrderNum" Type="Int32" />           
        <asp:Parameter Name="original_id" Type="Int32" />      
    </UpdateParameters> 
    </asp:SqlDataSource>

    <cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server" EnablePartialRendering="true">
    </cc1:ToolkitScriptManager>
    <cc1:ReorderList ID="ReorderList1" runat="server" AllowReorder="True" 
    DataSourceID="SqlDataSource_LensCatList2" PostBackOnReorder="False" 
    DataKeyField="DBID" SortOrderField="OrderNum">
    <DragHandleTemplate>           
        <div class="DragHandleClass">           
        </div>      
    </DragHandleTemplate> 
    <ItemTemplate>
        <asp:Label ID="LensNameLabel" runat="server" Text='<%# Eval("LensName") %>' />
    </ItemTemplate>
    </cc1:ReorderList>


    </div>
    </form>
</body>
</html>

Solution

  • Just a Suggestion: Look into JQuery's drag and drop UI : http://jqueryui.com/demos/draggable/

    I have used it with lists for quite some time and it is very nice and SOOOO much easier to work with than the AjaxControlToolkit.

    Just a suggestion.