ListBox Drag & Drop from Multiple Source to One Destination

5 posts, 1 answers
  1. SorinC
    SorinC avatar
    11 posts
    Member since:
    Nov 2009

    Posted 22 Mar 2011 Link to this post

    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.
  2. Kate
    Admin
    Kate avatar
    1898 posts

    Posted 25 Mar 2011 Link to this post

    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
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. SorinC
    SorinC avatar
    11 posts
    Member since:
    Nov 2009

    Posted 25 Mar 2011 Link to this post

    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>

  5. Answer
    Kate
    Admin
    Kate avatar
    1898 posts

    Posted 30 Mar 2011 Link to this post

    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
  6. SorinC
    SorinC avatar
    11 posts
    Member since:
    Nov 2009

    Posted 30 Mar 2011 Link to this post

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

    Thank you!
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017