This is a migrated thread and some comments may be shown as answers.

ListBox Drag & Drop from Multiple Source to One Destination

4 Answers 165 Views

ListBox

This is a migrated thread and some comments may be shown as answers.

4 Answers, 1 is accepted

answered on 25 Mar 2011, 06:20 PM

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>

Accepted