How to use JQuery.UI Sortable

[KDL]

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.

1. How to wire up Sortable so that RadListBox methods get called?
2. How to get the item's index/position in list after it's dropped?

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>

 

 

[Bozhidar]

Hi Kent,

I've prepared a small sample page demonstrating the desired functionality. In the page all the modifications made to the listboxes through the sortable mechanism are automatically transferred to the listboxes on postback.

Please keep in mind that this is a highly custom use of the listboxes, so there are limitations to the achieved functionality.
 
Greetings,
Bozhidar
the Telerik team

[KDL]

Wow, thank you Bozhidar! That was very helpful and got me most of the way there. In fact, if anyone is interested, it's critical to set either a height or min-height for the .rlbList css class when using this in a horizonal mode. That one kept me guessing for a while.

I actually was not able to get this working yet in my project, looks like something to do with Ajax. I did get it working on a test page just fine (with ajax). But in my case the RadListBox is in a usercontrol that's contained in a RadPageView tab scenario with a RadAjaxManager. In this case I'm unable to drag any items (normal RadListBox works fine in this scenario however). I suspect that the "connected" css class is not being applied/reapplied but haven't put my finger on it yet. But thanks for all the help.