Copy Radlistbox items with datasource binding to other Radlistbox

[kharen]

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.

[Dimitar Terziev]

Hi Kharen,

Please refer to the following demo showing how to transfer template items from one listbox to another.

Best wishes,
Dimitar Terziev
the Telerik team

[kharen]

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>
        </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.

[Dimitar Terziev]

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

[kharen]

Thank you very much Telerik, this really helped me!

[Zbysek]

I tried your demo code and it did not call OnDropped="RadListBox_Dropped" method on server between listboxes. Why? I NEED it urgently.
Visual Studio 2010, last version of your component.

[Dimitar Terziev]

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

[Zbysek]

Thank you.