I'm trying to implement JQuery.UI Sortable with the RadListBox control. My scenario is to have a top list containing "selected" items and a bottom list containing "available" items. The user must be able to move items between the lists using both drag/drop and the built-in buttons. Also, the "selected" list can be reordered using drag/drop. I also need to handle the "transferred" and "reordered" events server-side. The results are ultimately saved to the database. Please see the attached screen.jpg for an example.
I have this all working using just the RadListBox control. But the user experience isn't very good because I'm using top/bottom lists rather than side-by-side so there isn't a good visual indicator of the new item order until after the item is dropped. I really like the way JQuery.UI Sortable works (makes room for the items as they are reordered with smooth animation) and want to implement it in this scenario. Seems like it should be simple, and it was to get the reordering to work (visually) but the control events don't fire. Basically, it appears to work but the control doesn't know anything about the new order of items when Sortable is involved.
It probably just needs some JS magic to make this work and I'd appreciate any help. Thanks!!!
Current JS:
<link href="<%: Page.ResolveUrl("~/JQuery/jquery-ui.css")%>" rel="stylesheet" type="text/css" /><telerik:RadScriptBlock Id="RadScriptBlock1" runat="server"> <script src="<%: Page.ResolveUrl("~/JQuery/jquery-ui.min.js")%>" type="text/javascript" ></script> <script type="text/javascript"> $(function () { $("#TopList .rlbList").sortable(); $("#TopList .rlbList").bind("sortupdate", function (event, ui) { ReorderItem(this, ui); }); $("#TopList .rlbList").disableSelection(); }); function ReorderItem(event, ui) { var list = $find("<%= lstSelectedFiles.ClientID %>"); var item = list.get_selectedItem(); var index = item.get_index(); //??? list.reorderItem(item, index); }; </script></telerik:RadScriptBlock>
Current RadListBox setup:
<div id="TopList"> <telerik:RadListBox ID="lstSelectedFiles" runat="server" AllowReorder="True" AllowTransferOnDoubleClick="False" EnableDragAndDrop="true" SelectionMode="Multiple" AutoPostBackOnReorder="true" width="100%" > <ButtonSettings Position="Right" /> <HeaderTemplate> <h2>Selected Images</h2> </HeaderTemplate> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container, "Text")%>' /> </ItemTemplate> <EmptyMessageTemplate> <div class="EmptyList"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/BlankImage.png" /> <br /> Drag Images here... </div> </EmptyMessageTemplate> </telerik:RadListBox></div><div id="BottomList"> <telerik:RadListBox ID="lstSourceFiles" runat="server" DataSourceID="ImageFileDS" DataKeyField="AssetId" DataValueField="AssetId" DataTextField="FileUrlImageSmallPadded" TransferToID="lstSelectedFiles" AllowTransfer="True" AllowTransferOnDoubleClick="False" SelectionMode="Multiple" ButtonSettings-ShowTransferAll="false" EnableDragAndDrop="true" AllowReorder="false" width="100%" AutoPostBackOnTransfer="true" CssClass="SourceList" > <ButtonSettings Position="Top" /> <HeaderTemplate> <h2>Available Images</h2> </HeaderTemplate> <ItemTemplate> <asp:Image ID="Image1" runat="server" ImageUrl='<%# DataBinder.Eval(Container, "Text")%>' /> </ItemTemplate> <EmptyMessageTemplate> <div class="EmptyList"> <asp:Image ID="Image1" runat="server" ImageUrl="~/Images/BlankImage.png" /> <br /> Upload some images to work with </div> </EmptyMessageTemplate> </telerik:RadListBox></div>
<telerik:GridTemplateColumn HeaderText="Godkänn" ItemStyle-Width="50px" UniqueName="cChkbox"> <ItemTemplate> <fw:CustomCheckBox DatabaseID='<%# Eval("ID") %>' runat="server" OnCheckedChanged="onCheckedChanged" /> </ItemTemplate></telerik:GridTemplateColumn>protected void btnAcceptHours_Click(object sender, EventArgs e) { List<string> AcceptHours = new List<string>(); foreach (GridDataItem item in rgAvvaktandeTim.Items) { foreach (Control c in item.Controls) { foreach (Control d in c.Controls) { if (d is CustomControls.CustomCheckBox) { if ((d as CustomControls.CustomCheckBox).Checked == true) { AcceptHours.Add((d as CustomControls.CustomCheckBox).DatabaseID); goto ContinueOuterIteration; } } } } ContinueOuterIteration: continue; }