ListBox Drag & Drop from Multiple Source to One Destination

[SorinC]

Hello,

Found an article on drag & drop to multiple destinations here. In my case, it's the opposite -- I need to drag & drop (D&D) from any of four listboxes to a fifth destination listbox.

I noticed that after a first D&D from any of the source listboxes, subsequent D&D operations work only from that initial listbox, but not from any of the other three listboxes -- I assume some reference is not cleared after the first operation.

Can D&D from multiple sources be done "out-of-the-box", or does it need special handling similar to the multiple destination case?

Thanks.

[Kate]

Hello SorinC,

You can allow transfer from many RadListBox control to a single one by adding the following properties to all of the listboxes.

<telerik:RadListBox ID="RadListBox2" runat="server" EnableDragAndDrop="true" AllowTransfer="true"TransferToID="RadListBox1">

Please take a look at the following demo here for more details..

Kind regards,
Kate
the Telerik team

[SorinC]

Hi Kate,

I already thought of that, and the settings you mentioned were already there. For reference, below is the source code. (the code behind only loads data in controls).

How it works:
cboParent has two hard-coded options
Upon selecting an item in cboParent, cboChild is loaded with different sets of items
Selecting a particular item in cboChild populates the five listboxes with items based on cboChild.SelectedValue

After reading your reply, I reviewed the code and the only section that could pose problems is the radajaxmanager -- it's possible that the automatic updates are not defined properly. so I will experiment with it while awaiting for your answer.

Thank you.

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="L.aspx.cs" Inherits="Project1.Folder1.L"
    MasterPageFile="~/MasterPage.master" Title="Test ListBox" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>
<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">
    <div style="width: 100%">
        <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
            <AjaxSettings>
                <telerik:AjaxSetting AjaxControlID="cboParent">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cboParent" />
                        <telerik:AjaxUpdatedControl ControlID="cboChild" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="cboChild">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="cboChild" />
                        <telerik:AjaxUpdatedControl ControlID="txtIntName" />
                        <telerik:AjaxUpdatedControl ControlID="txtPubName" />
                        <telerik:AjaxUpdatedControl ControlID="lstDest" />
                        <telerik:AjaxUpdatedControl ControlID="lstSource1" />
                        <telerik:AjaxUpdatedControl ControlID="lstSource2" />
                        <telerik:AjaxUpdatedControl ControlID="lstSource3" />
                        <telerik:AjaxUpdatedControl ControlID="lstSource4" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="lstSource1">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lstDest" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="lstSource2">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lstDest" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="lstSource3">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lstDest" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
                <telerik:AjaxSetting AjaxControlID="lstSource4">
                    <UpdatedControls>
                        <telerik:AjaxUpdatedControl ControlID="lstDest" />
                    </UpdatedControls>
                </telerik:AjaxSetting>
            </AjaxSettings>
        </telerik:RadAjaxManager>
        <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
            <%--CssClass="example-panel"--%>
            <table style="width: 100%; table-layout: fixed;">
                <%--====================================================================================================--%>
                <tr>
                    <%-- Col 1 --%>
                    <td style="vertical-align: middle; height: 2em; width: 6em;">
                        <asp:Label ID="Label1" runat="server">Parent</asp:Label>
                    </td>
                    <%-- Col 2 --%>
                    <td style="vertical-align: middle; height: 2em; width: 24em;">
                        <telerik:RadComboBox ID="cboParent" Style="width: 10em;" runat="server" AutoPostBack="True"
                            OnSelectedIndexChanged="cboParent_SelectedIndexChanged">
                            <%--Skin="Office2007"--%>
                            <Items>
                                <telerik:RadComboBoxItem Text="Canada" Value="CA" />
                                <telerik:RadComboBoxItem Text="US" Value="US" />
                            </Items>
                        </telerik:RadComboBox>
                    </td>
                    <%-- Col 3 --%>
                    <td style="vertical-align: middle; height: 2em; width: 7em; border-style: none; border-width: thin;
                        border-color: Navy;">
                        <asp:Label ID="Label4" runat="server">Child</asp:Label>
                    </td>
                    <%-- Col 4 --%>
                    <td style="vertical-align: middle; height: 2em; border-style: none; border-width: thin;
                        border-color: Navy;">
                        <telerik:RadComboBox ID="cboChild" runat="server" DataTextField="RT_NameInternal_S"
                            DataValueField="RT_ChildID_PK" Style="width: 40.5em;" AutoPostBack="true" OnSelectedIndexChanged="cboChild_SelectedIndexChanged">
                            <%--Skin="Office2007" --%>
                        </telerik:RadComboBox>
                    </td>
                </tr>
                <%--====================================================================================================--%>
                <tr>
                    <%-- Col 1 --%>
                    <td style="vertical-align: middle; height: 2em;">
                        <asp:Label ID="Label3" runat="server">Public Name</asp:Label>
                    </td>
                    <%-- Col 2 --%>
                    <td style="vertical-align: middle; height: 2em; border-style: none; border-width: thin;
                        border-color: Navy;">
                        <telerik:RadTextBox ID="txtPubName" runat="server" Width="19em" MaxLength="50">
                        </telerik:RadTextBox>
                    </td>
                    <%-- Col 3 --%>
                    <td style="vertical-align: middle; height: 2em;">
                        <asp:Label ID="Label2" runat="server">Internal Name</asp:Label>
                    </td>
                    <%-- Col 4 --%>
                    <td style="vertical-align: middle; height: 2em; border-style: none; border-width: thin;
                        border-color: Navy;">
                        <telerik:RadTextBox ID="txtIntName" runat="server" Width="40em" MaxLength="255">
                        </telerik:RadTextBox>
                    </td>
                </tr>
                <%--====================================================================================================--%>
                <tr>
                    <td colspan="4" align="center">
                        <table>
                            <tr>
                                <td align="left">
                                    <br />
                                    Members
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <%-- Child Members --%>
                                    <div style="text-align: left">
                                        <telerik:RadListBox ID="lstDest" runat="server" AllowReorder="true" AutoPostBackOnReorder="true"
                                            DataKeyField="Inits" DataTextField="FullName" EnableDragAndDrop="true"
                                            Height="200px" SelectionMode="Multiple" Width="200px"
                                             AllowDelete="true" ButtonSettings-ShowDelete="true">
                                            <Items>
                                            </Items>
                                        </telerik:RadListBox>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td colspan="4" align="center">
                        <%--====================================================================================================--%>
                        <table>
                            <tr style="text-align: left;">
                                <td>
                                    Source #1
                                </td>
                                <td>
                                    Source #2
                                </td>
                                <td>
                                    Source #3
                                </td>
                                <td>
                                    Source #4
                                </td>
                            </tr>
                            <tr>
                                <td align="center">
                                    <%-- Source #1 --%>
                                    <div style="text-align: left">
                                        <telerik:RadListBox ID="lstSource1" runat="server" AllowReorder="true" AllowTransfer="true"
                                            AutoPostBackOnReorder="true" AutoPostBackOnTransfer="true" DataKeyField="Inits"
                                            DataTextField="FullName" EnableDragAndDrop="true" Height="200px"
                                            SelectionMode="Multiple" TransferToID="lstDest" Width="200px">
                                            <Items>
                                            </Items>
                                        </telerik:RadListBox>
                                    </div>
                                </td>
                                <td align="center">
                                    <%-- Source #2 --%>
                                    <div style="text-align: left">
                                        <telerik:RadListBox ID="lstSource2" runat="server" AllowReorder="true" AllowTransfer="true"
                                            AutoPostBackOnReorder="true" AutoPostBackOnTransfer="true" DataKeyField="Inits"
                                            DataTextField="FullName" EnableDragAndDrop="true" Height="200px"
                                            SelectionMode="Multiple" TransferToID="lstDest" Width="200px">
                                            <Items>
                                            </Items>
                                        </telerik:RadListBox>
                                    </div>
                                </td>
                                <td align="center">
                                    <%-- Source #3 --%>
                                    <div style="text-align: left">
                                        <telerik:RadListBox ID="lstSource3" runat="server" AllowReorder="true" AllowTransfer="true"
                                            AutoPostBackOnReorder="true" AutoPostBackOnTransfer="true" DataKeyField="Inits"
                                            DataTextField="FullName" EnableDragAndDrop="true" Height="200px"
                                            SelectionMode="Multiple" TransferToID="lstDest" Width="200px">
                                            <Items>
                                            </Items>
                                        </telerik:RadListBox>
                                    </div>
                                </td>
                                <td align="center">
                                    <%-- Source #4 --%>
                                    <div style="text-align: left">
                                        <telerik:RadListBox ID="lstSource4" runat="server" AllowReorder="true" AllowTransfer="true"
                                            AutoPostBackOnReorder="true" AutoPostBackOnTransfer="true" DataKeyField="Inits"
                                            DataTextField="FullName" EnableDragAndDrop="true" Height="200px"
                                            SelectionMode="Multiple" TransferToID="lstDest" Width="200px"
                                             ButtonSettings-Position="Top" ButtonSettings-TransferButtons="TransferAllFrom,TransferFrom" CheckBoxes="true" >
                                            <Items>
                                            </Items>
                                        </telerik:RadListBox>
                                    </div>
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
                <tr>
                    <td align="right" colspan="4" style="width: 100%">
                        <telerik:RadButton ID="cmdSave" runat="server" Text="Save">
                        </telerik:RadButton>

                        <telerik:RadButton ID="cmdCancel" runat="server" Text="Cancel">
                        </telerik:RadButton>
                    </td>
                </tr>
            </table>
        </telerik:RadAjaxPanel>
    </div>
</asp:Content>

[Kate]

Hi SorinC,

I tested the code that you provided and found out that you use both RadAjaxManager and RadAjaxPanel. The two of them work perfectly when separate but not together. Therefore to achieve the desired effect you can just remove one of them and this will fix the issue with RadListBox items transfer. Here is a very good help article that explains in more details the use of RadAjaxManager and RadAjaxPanel.

Greetings,
Kate
the Telerik team

[SorinC]

After converting the RadPanel to an asp Panel and correcting the chain of updates in the AjaxManager, it worked.

Thank you!