Telerik Forums / UI for ASP.NET AJAX Forum / ListBox /

ListBox Drag & Drop from Multiple Source to One Destination

Telerik UI for ASP.NET AJAX
Resources Buy Try

5 posts, 1 answers

SorinC

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.
Kate
Admin

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
SorinC

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>
Answer
Kate
Admin

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

Vote for the 7 Telerik products at the 2011 Great Indian Developer Awards!
SorinC

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!

ListBox Drag & Drop from Multiple Source to One Destination

SorinC

Kate

SorinC

Kate

SorinC