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

Copy Radlistbox items with datasource binding to other Radlistbox

7 Answers 262 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
kharen
Top achievements
Rank 1
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

Sort by
0
Dimitar Terziev
Telerik team
answered on 01 Sep 2011, 11:07 AM
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

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

0
kharen
Top achievements
Rank 1
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>
        </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.

0
Dimitar Terziev
Telerik team
answered on 07 Sep 2011, 12:45 PM
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 >>

0
kharen
Top achievements
Rank 1
answered on 09 Sep 2011, 07:07 AM
Thank you very much Telerik, this really helped me!
0
Zbysek
Top achievements
Rank 1
answered on 09 May 2012, 02:45 PM
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.
0
Dimitar Terziev
Telerik team
answered on 14 May 2012, 08:15 AM
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.
0
Zbysek
Top achievements
Rank 1
answered on 14 May 2012, 10:06 AM
Thank you.
Tags
ListBox
Asked by
kharen
Top achievements
Rank 1
Answers by
Dimitar Terziev
Telerik team
kharen
Top achievements
Rank 1
Zbysek
Top achievements
Rank 1
Share this question
or