Drag and Drop between 2 dynamically created RadListBoxes

Question

I have an ASP Repeater where each item is defined by an ItemTemplate to contain a couple labels and a RadListBox. The items in the RadListBox are defined by a second ItemTemplate.

I need to be able to drag and drop items between any 2 RadListBoxes and have the DataSources on the server side update accordingly.

Because I need to allow dragging between any 2 RadListBoxes in my Repeater, I cannot set the TransferToID as most examples do.

I have used these 2 pages as a guide to implementation.

• http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/draganddrop/defaultcs.aspx?#qsf-demo-source
• http://www.telerik.com/forums/transfer-to-multiple-radlistboxes-using-drag-and-drop

Webform page snippet (aspx)

<telerik:RadScriptBlock runat="server">
    <script type="text/javascript">
    function lbTeamDragStart(sender, args) {
        var objType = args.get_sourceItem().get_text();

        console.log('Drag Start -> ' + objType);
    }

    function lbTeamDragging(sender, args) {
        var objType = args.get_sourceItem().get_text();
        console.log('Dragging -> ' + objType);
    }

    function lbTeamDropped(sender, args) {
        var objType = args.get_sourceItem().get_text();
        console.log('Dropped -> ' + objType);
        transferManager.performTransfer(sender, args);            
    }

    (function ($) {
        transferManager = function () { }

        transferManager.performTransfer = function (sender, args) {
            var destinationItemIndex = this._getDestinationIndex(args);
            var destinationListBox = this._getDestinationListBox(args);

            if (destinationListBox == null)
                return;

            var reorderIndex = args.get_dropPosition() == 0 ?
                destinationItemIndex : destinationItemIndex + 1;

            var items = args.get_sourceItems();

            sender.trackChanges();
            destinationListBox.trackChanges();
            this._transfer(items, destinationListBox, reorderIndex);
            sender.commitChanges();
            destinationListBox.commitChanges();
        }

        transferManager._transfer = function (items, destination, reorderIndex) {
            $.each(items, function (index, item) {
                item.unselect();
                destination.trackChanges();
                destination.get_items().insert(reorderIndex, item);
                destination.commitChanges();
                //var ajaxManager = $find("<%= this.RadAjaxManagerClientId %>");
                //ajaxManager.ajaxRequestWithTarget('<%= rptrTeams.UniqueID %>', '');
                console.log('transferManager._transfer -> ' + item.get_text());
            });
        }

        transferManager._getDestinationIndex = function (args) {
            var destinationItem = args.get_destinationItem();
            if (destinationItem)
                return destinationItem.get_index();

            return 0;
        }

        transferManager._getDestinationListBox = function (args) {
            var destinationItem = args.get_destinationItem();

            if (destinationItem) {
                var id = destinationItem.get_listBox().get_id();
                return $find(id);
            }

            var parent = $(args.get_htmlElement()).parent();
            if (parent.is(".RadListBox")) {
                var id = parent[0].id;
                return $find(id);
            }
            else if (parent.is(".rlbGroup")) {
                var id = parent[0].parentNode.id;
                return $find(id);
            }
            return null;
        }
    })($telerik.$);
    </script>
</telerik:RadScriptBlock>

<asp:Repeater ID="rptrTeams" runat="server" OnItemDataBound="rptrTeams_ItemDataBound">        
    <ItemTemplate>    
        <div class="well form-horizontal span3" >
            <div class="row TeamDesignerTeamBox" >   
                <div class="TeamDesignerTeamHeaderBox">
                    <div class="TeamDesignerTeamName"><%# DataBinder.Eval(Container.DataItem, "Name") %></div>
                    <div class="TeamDesignerMemberCount">Members: <%# DataBinder.Eval(Container.DataItem, "TeamDesignerProjectTeamMembers.Count") %></div>
                </div>                                                                    

                <telerik:RadListBox runat="server" OnItemDataBound="rlbTeam_ItemDataBound" 

                                    AllowTransfer="true" AllowReorder="true" EnableDragAndDrop="true" 

                                    AutoPostBackOnTransfer="true"   OnTransferred="rlbTeam_Transferred"
                                    AutoPostBackOnReorder="false"

                                    ButtonSettings-ShowTransferAll="false" ButtonSettings-ShowTransfer="false"   ButtonSettings-ShowReorder =" false" 

                                    OnClientDragStart="lbTeamDragStart" OnClientDragging="lbTeamDragging" OnClientDropped="lbTeamDropped" 

                                    CssClass="TeamDesignerMemberBox" BorderWidth="0px" BorderStyle="None">
                    <ItemTemplate>
                        <div> 
                            <div class="TeamDesignerMemberName" style="font-size: 12px !important;"><%# DataBinder.Eval(Container.DataItem, "DisplayName") %></div>
                            <div class="TeamDesignerMemberDetails" style="font-size: 12px !important;"><%# DataBinder.Eval(Container.DataItem, "MemberLogin.Student.Gender") %> 
                                        <% if (SortByBirthCountry) { %><img class="TeamDesignerFlagIcon" src='/eZone/Images/Flags/<%# DataBinder.Eval(Container.DataItem, "BirthCountryImageFileName") %>' alt="<%#DataBinder.Eval(Container.DataItem, "BirthCountry") %>"> <% } %>
                                        <% if (SortByCitizenship) { %> <img class="TeamDesignerFlagIcon" src='/eZone/Images/Flags/<%# DataBinder.Eval(Container.DataItem, "CitzenshipImageFileName") %>' alt="<%#DataBinder.Eval(Container.DataItem, "Citzenship") %>"> <% } %>
                            </div><br />
                        </div>                            
                    </ItemTemplate>
                </telerik:RadListBox>
            </div>
        </div> 
    </ItemTemplate>
</asp:Repeater>   

CodeBehind (aspx.cs)

TeamDesignerProject _TeamDesignerProject = null;
emTeamDesigner _EMTeamDesigner = null;

public string RadAjaxManagerClientId
{
    get
    {
        var ram = this.Master.Master.FindControl("ram");
        return (ram != null) ? ram.ClientID : string.Empty;
    }
}    
public bool SortByCitizenship
{
    get
    {
        return true;
    }
}

public bool SortByBirthCountry
{
    get
    {
        return true;
    }
}    

    protected void Page_Load(object sender, EventArgs e)
    {
        if (_TeamDesignerProject == null)
        {
            _TeamDesignerProject = SessionWrapper.TeamDesigner.TeamDesignerProject;
        }
        if (_EMTeamDesigner == null)
        {
            _EMTeamDesigner = SessionWrapper.TeamDesigner.EMTeamDesigner;
        }

        if (Page.IsPostBack == false)
        {
            DisplayResults();
        }
    }


    protected void btnRevert_Click(object sender, EventArgs e)
    {
        //Revert all the team members to what they were prior to any user drag/drop changes
        _TeamDesignerProject = SessionWrapper.TeamDesigner.TeamDesignerProject;

        rptrTeams.DataSource = _TeamDesignerProject.TeamDesignerProjectTeams;
        rptrTeams.DataBind();
    }

    protected void rptrTeams_ItemDataBound(object sender, RepeaterItemEventArgs e)
    {
        //Dive into the RepeaterItems and ensure the DataSources for each Items RadListBox is set to the members for that team
        rttmMembers.TargetControls.Clear();

        foreach (var repeaterItem in rptrTeams.Controls)
        {
            if (repeaterItem is RepeaterItem)
            {
                foreach (var ctrl in ((RepeaterItem)repeaterItem).Controls)
                {
                    if (ctrl is RadListBox)
                    {
                        if (((RepeaterItem)repeaterItem).DataItem is TeamDesignerProjectTeam)
                        {
                            var team = (TeamDesignerProjectTeam)((RepeaterItem)repeaterItem).DataItem;

                            var listTeamMembers = team.TeamDesignerProjectTeamMembers;
                            if (listTeamMembers != null)
                            {
                                //((RadListBox)ctrl).ID = string.Format("rlbTeam_{0}", team.Id.ToString());
                                ((RadListBox)ctrl).DataSource = listTeamMembers;
                                ((RadListBox)ctrl).DataValueField = "MemberId";
                                ((RadListBox)ctrl).DataTextField = "DisplayName";
                                ((RadListBox)ctrl).DataBind();
                            }
                        }
                        break;
                    }
                }
            }
        }
    }

    private void DisplayResults()
    {
        if (_TeamDesignerProject != null)
        {
            lblProjectName.Text = _TeamDesignerProject.Name;
            lblProjectDescription.Text = _TeamDesignerProject.Description;

            rptrTeams.DataSource = _TeamDesignerProject.TeamDesignerProjectTeams;
            rptrTeams.DataBind();
        }

    }

    protected void rlbTeam_Transferred(object sender, RadListBoxTransferredEventArgs e)
    {
        var temp = "transferring?";

        foreach (var item in e.Items)
        {
            //Databind the item in order to evaluate the databinding expressions from the template
            item.DataBind();
        }
    }

What I experience now

• Dragging an item successfully removes it from the sender RadListBox on the client side only and doesn't add to the destination RadListBox at all.
• Setting up a handler for RadListBox.OnTransfer never fires regardless of other settings

Question

What is needed to properly keep the DataSources of both RadListBoxes in sync after the UI rendering is complete?