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

Copy Radlistbox items with datasource binding to other Radlistbox

7 Answers 403 Views

ListBox

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

kharen asked on 29 Aug 2011, 08:02 PM

Hi, i'am new using telerik controls.

I hace an application c#, and i want to transfer Radlistbox items to an other Radlistbox. The first Radlistbox 1 is filled with datasource binding, and the second Radlistbox2 has to be filled with items from Radlistbox1. Ofcourse with Transfermode="copy"

My application can be transfer items to the other Radlistbox2, but only one of the columns, i think. I want to transfer all columns to Radlistbox2. My code is as follow:

..........

<style type="text/css">

.list {

float: left;

width: 100px;

}

.idClass {

float: left;

width: 20px;

}

</style>

.........

<telerik:RadListBox ID="RadListBox1" runat="server" Width="400px" Height="200px" TransferToID="RadListBox2" AllowTransfer="true"

SelectionMode="Multiple" AutoPostBackOnTransfer="true" AllowReorder="true" AutoPostBackOnReorder="true" EnableDragAndDrop="true"

OnDropped="RadListBox_Dropped" AppendDataBoundItems="False" DataSourceID="SqlDataSource1" DataTextField="Nombre" DataValueField="ID"

OnTransferred="RadListBox1_Transferred" OnItemDataBound="RadListBox1_ItemDataBound" TransferMode="Copy" CausesValidation="false">

<ButtonSettings ShowTransfer="false" />

<ItemTemplate>

<span style="float:left;">

<img src='<%# Eval("Foto") %>' width="30px" height="30px" alt="dd"/>

</span>

<span style="float:left;padding:10px">

<asp:Label ID="Label1" runat="server" Text='<%# Eval("ID") %>' CssClass="idClass"></asp:Label>

<asp:Label ID="Label2" runat="server" Text='<%# Eval("Nombre") %>' CssClass="list"></asp:Label>

<asp:Label ID="Label3" runat="server" Text='<%# Eval("Apellidos") %>' CssClass="list"></asp:Label>

<asp:Label ID="Label4" runat="server" Text='<%# Eval("Rol") %>'></asp:Label>

</span>

</ItemTemplate>

</telerik:RadListBox>

<telerik:RadListBox ID="RadListBox2" runat="server" Width="400px" Height="200px" AllowTransfer="true"

SelectionMode="Multiple" AllowReorder="true" AutoPostBackOnTransfer="true" TransferMode="Copy"

AutoPostBackOnReorder="true" TransferToID="RadListBox3" EnableDragAndDrop="true" AppendDataBoundItems="false" OnDropped="RadListBox_Dropped">

<ItemTemplate>

<span style="float:left;">

<img src='<%# Eval("Foto") %>' width="30px" height="30px" alt="dd"/>

</span>

<span style="float:left;padding:10px">

<asp:Label ID="Label5" runat="server" Text='<%# Eval("ID") %>' CssClass="idClass"></asp:Label>

<asp:Label ID="Label6" runat="server" Text='<%# Eval("Nombre") %>' CssClass="list"></asp:Label>

<asp:Label ID="Label7" runat="server" Text='<%# Eval("Apellidos") %>' CssClass="list"></asp:Label>

<asp:Label ID="Label8" runat="server" Text='<%# Eval("Rol") %>'></asp:Label>

</span>

</ItemTemplate>

</telerik:RadListBox>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CNXPostes%>"

ProviderName="System.Data.SqlClient"

SelectCommand="select Foto,ID, Nombre, Apellidos, Rol from empleado">

</asp:SqlDataSource>

AND THE CODE BEHIND IS:

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Collections.Generic;

using System.Text;

using Telerik.Web.UI;

public partial class Admin_TratandoProbar : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadListBox_Dropped(object sender, RadListBoxDroppedEventArgs e)

{

}

protected void RadListBox1_ItemDataBound(object sender, RadListBoxItemEventArgs e)

{

}

protected void RadListBox1_Transferred(object sender, RadListBoxTransferredEventArgs e)

{

// foreach (RadListBoxItem item in e.Items)

//{

// item.DataBind();

//}

}

Those radlistboxes within a RadPanelBar.

Please help me.

note.- sorry if i wrote with mistakes, my native language is spanish.

7 Answers, 1 is accepted

answered on 01 Sep 2011, 10:23 PM

Hi Telerik, thanks for reply.

I still have the problem. I tried the Demo that you refer to, it is without datasource, and i am trying with datasource. The problem is that only items whiches are linked with a datasource can't be transfered to the other radlistbox. Items which are written manually can be transfered. Also, in the first Radlistbox i am putting DataTextField and DataValueField properties. obviously, only can be transfered the DataValueField, the rest of templates columns can't be transfered, even when i drag one item from Radlistbox1 to Radlistbox2, the image from radlistbox1 disappears.
I would like that my project can do the same as the demo, but with datasource.

My code looks like as follow:

<form ...>

<telerik:RadScriptManager runat="server" ID="RadScriptManager1" />

<telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

<div class="example-panel">

<div class="order-panel">

<label class="product-list">

Product list</label>

<label class="detail">

Detail View & Purchase</label>

<telerik:RadListBox ID="RadListBox1" runat="server" AllowTransfer="true" AutoPostBackOnTransfer="true" TransferMode="Move" Width="250px"

Height="200px" OnTransferred="RadListBox1_Transferred" SelectionMode="Multiple" AllowReorder="true" EnableDragAndDrop="true"

TransferToID="RadListBox2" OnDropped="RadListBox_Dropped" DataTextField="Nombre" DataValueField="ID" AppendDataBoundItems="False"

DataSourceID="SqlDataSource1" OnItemDataBound="RadListBox1_ItemDataBound">

<ButtonSettings ShowTransferAll="false" VerticalAlign="Middle" />

<ItemTemplate>

<img class="product-image" src='<%# DataBinder.Eval(Container.DataItem, "Foto")%>' alt="product image"/ width="30px" height="30px">

<span class="product-title"><%# DataBinder.Eval(Container, "ID")%></span>

<span class="bearing">1 bearing</span>

<span class="product-title"><%# DataBinder.Eval(Container.DataItem, "Nombre")%>'</span>

</ItemTemplate>

<Items>

<telerik:RadListBoxItem Text="Spinning Reel 1" Value="reel1_thumb.png" Price="99" Selected="true" />

<telerik:RadListBoxItem Text="Spinning Reel 2" Value="reel2_thumb.png" Price="199" />

<telerik:RadListBoxItem Text="Spinning Reel 3" Value="reel3_thumb.png" Price="99" />

<telerik:RadListBoxItem Text="Spinning Reel 4" Value="reel4_thumb.png" Price="299" />

<telerik:RadListBoxItem Text="Spinning Reel 5" Value="reel5_thumb.png" Price="199" />

<telerik:RadListBoxItem Text="Spinning Reel 6" Value="reel6_thumb.png" Price="99" />

<telerik:RadListBoxItem Text="Spinning Reel 7" Value="reel7_thumb.png" Price="299" />

<telerik:RadListBoxItem Text="Spinning Reel 8" Value="reel8_thumb.png" Price="199" />

</Items>

</telerik:RadListBox>

<telerik:RadListBox runat="server" ID="RadListBox2" Height="200px" Width="270px" AllowTransfer="true" TransferMode="Move"

SelectionMode="Multiple" AllowReorder="true" OnDropped="RadListBox_Dropped" AutoPostBackOnReorder="true" AutoPostBackOnTransfer="true"

EnableDragAndDrop="true" AppendDataBoundItems="false">

<ItemTemplate>

<img class="product-image" src='<%# DataBinder.Eval(Container.DataItem, "Foto")%>' alt="product image" />

<span class="detail-title"><%# DataBinder.Eval(Container, "ID")%></span>

<span class="bearing">1 bearing</span>

<span class="product-title"><%# DataBinder.Eval(Container.DataItem, "Nombre")%>'</span>

<ul class="details">

<li>

<label>

Price:</label>

<span>

<%# Convert.ToInt32(DataBinder.Eval(Container, "Attributes['Price']")).ToString("C0")%></span>

</li>

<li>

<label>

Quantity:</label>

<telerik:RadNumericTextBox runat="server" ID="QuantityTextBox" Width="40px" MinValue="1"

MaxValue="10" ShowSpinButtons="true" Value="1" NumberFormat-DecimalDigits="0" />

</li>

</ul>

</ItemTemplate>

<Items>

<telerik:RadListBoxItem Text="Spinning Reel 9" Value="reel9.png" Price="99" />

</Items>

</telerik:RadListBox>

</div>

</telerik:RadAjaxPanel>

<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:CNXPostes%>"

ProviderName="System.Data.SqlClient"

SelectCommand="select Foto,ID, Nombre, Apellidos, Rol from empleado">

</asp:SqlDataSource>

</form>

And the behind code:

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using Telerik.Web.UI;

public partial class Admin_Radlistbox_to_Radlistbox : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

if (!Page.IsPostBack)

{

RadListBox1.DataBind();

RadListBox2.DataBind();

}

protected void RadListBox1_Transferred(object sender, RadListBoxTransferredEventArgs e)

{

foreach (RadListBoxItem item in e.Items)

{

//Update the image

if (e.SourceListBox == RadListBox1)

{

item.Value = item.Value.Replace("_thumb", "");

}

else

{

item.Value = item.Value.Replace(".png", "_thumb.png");

}

//Databind the item in order to evaluate the databinding expressions from the template

item.DataBind();

}

protected void RadListBox_Dropped(object sender, RadListBoxDroppedEventArgs e)

{

}

protected void RadListBox1_ItemDataBound(object sender, RadListBoxItemEventArgs e)

{

}

Thank you for help.

answered on 07 Sep 2011, 12:45 PM

Templates.zip

Hello Kharen,

I've prepared a sample web site which you could use as a starting point in order to achieve the desired functionality.

All the best,
Dimitar Terziev
the Telerik team

Thank you for being the most amazing .NET community! Your unfailing support is what helps us charge forward! We'd appreciate your vote for Telerik in this year's DevProConnections Awards. We are competing in mind-blowing 20 categories and every vote counts! VOTE for Telerik NOW >>

answered on 14 May 2012, 08:15 AM

Templates.zip

Hi Zbysek,

Please refer to the help article regarding the Dropped server side event of the RadListBox. This event is fired only when dropping items over HTML element which has id attribute set as mentioned in the help article:
The Dropped event fires after the Dropping event (if not cancelled). It is fired when a RadListBoxItem is dropped over an HTML element which has id attribute set. It is not fired when you drop an item over another RadListBox/RadListBoxItem.

Sample page demonstrating the usage of the Dropped event is attached.

Regards,
Dimitar Terziev
the Telerik team

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to their blog feed now.