Copy Radlistbox items with datasource binding to other Radlistbox

8 posts, 0 answers
  1. kharen
    kharen avatar
    7 posts
    Member since:
    Aug 2011

    Posted 29 Aug 2011 Link to this post

    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.
  2. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 01 Sep 2011 Link to this post

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

  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. kharen
    kharen avatar
    7 posts
    Member since:
    Aug 2011

    Posted 01 Sep 2011 Link to this post

    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.

  5. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 07 Sep 2011 Link to this post

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

  6. kharen
    kharen avatar
    7 posts
    Member since:
    Aug 2011

    Posted 09 Sep 2011 Link to this post

    Thank you very much Telerik, this really helped me!
  7. Zbysek
    Zbysek avatar
    7 posts
    Member since:
    Mar 2012

    Posted 09 May 2012 Link to this post

    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.
  8. Dimitar Terziev
    Admin
    Dimitar Terziev avatar
    1266 posts

    Posted 14 May 2012 Link to this post

    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.
  9. Zbysek
    Zbysek avatar
    7 posts
    Member since:
    Mar 2012

    Posted 14 May 2012 Link to this post

    Thank you.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017