Listbox with templates - transfer items issue

6 posts, 1 answers
  1. Srinivas Nilagiri
    Srinivas Nilagiri avatar
    14 posts
    Member since:
    Dec 2009

    Posted 08 Jan 2010 Link to this post

    Hi All,
    I am trying to display items in one source RadListBox and transfer to destination RadListBox.
    Here is my code
    ...  
    <tr> 
                <td> 
                     <asp:Label ID="Label3" runat="server" Text="Search items :"></asp:Label>&nbsp;&nbsp;&nbsp;<asp:TextBox ID="txtSearch" runat="server" onkeyup="highlightItems();"></asp:TextBox>                           
                     <telerik:RadListBox ID="rlbSource" runat="server" AllowTransfer="true" CssClass="listBoxText" 
                        Height="200px" SelectionMode="Multiple" TransferToID="rlbDestination" Width="450px" AllowTransferOnDoubleClick="true">  
                        <ButtonSettings ShowTransferAll="false" VerticalAlign="Middle"/>  
                        <ItemTemplate> 
                            <asp:Label ID="Label4" runat="server" Text='<%#  DataBinder.Eval(Container.DataItem, "SYSTEM_DESCRIPTION") %>' SkinID="valuetext"></asp:Label> 
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="Label4" RelativeTo="Element" 
                                Position="BottomCenter" RenderInPageRoot="true" Width="300" CssClass="listBoxText">  
                                <b>System Particulars :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "SYSTEM_PARTICULARS")%> 
                                <br /><b>Maker :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "MAKER")%> 
                                <br /><b>City :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "CITY")%> 
                                <br /><b>Country :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "COUNTRY")%> 
                            </telerik:RadToolTip> 
                        </ItemTemplate>                                       
                    </telerik:RadListBox> 
                </td> 
                <td> 
                    <telerik:RadListBox runat="server" ID="rlbDestination" Height="200px" Width="450px"    
                         CssClass="listBoxText" AllowDelete="True" SelectionMode="Multiple">   
                         <ItemTemplate> 
                            <asp:Label ID="Label4" runat="server" Text='<%# DataBinder.Eval(Container.DataItem, "SYSTEM_DESCRIPTION") %>' SkinID="valuetext"></asp:Label> 
                            <telerik:RadToolTip ID="RadToolTip1" runat="server" TargetControlID="Label4" RelativeTo="Element" 
                                Position="BottomCenter" RenderInPageRoot="true" Width="300" CssClass="listBoxText">  
                                <b>System Particulars :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "SYSTEM_PARTICULARS")%> 
                                <br /><b>Maker :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "MAKER")%> 
                                <br /><b>City :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "CITY")%> 
                                <br /><b>Country :</b><br /> 
                                <%# DataBinder.Eval(Container.DataItem, "COUNTRY")%> 
                            </telerik:RadToolTip> 
                        </ItemTemplate>                                               
                    </telerik:RadListBox> 
                </td> 
                  
            </tr>   
    ... 

    and in the page_load event  I am doing this
           if (!Page.IsPostBack)  
            {  
                rlbSource.TransferMode = ListBoxTransferMode.Copy;  
                rlbDestination.DataBind();  
                rlbDestination.EmptyMessage = "No items added";  
            } 
    rlbSource.DataSource =  //call the function that returns a datatable.         
    rlbSource.DataValueField = "SYSTEM_CODE";  
    rlbSource.DataTextField = "SYSTEM_DESCRIPTION";          
    rlbSource.DataBind(); 

    I have 3 problems here
    1. Where I transfer the items from source to destination in the destination listbox the tooltip is not appearing.
    2. The delete button in destination listbox is is always disabled
    3. For some items in the destination the tooltip content is also displayed in the item text.

    Please help to resolve these issues. Thanks in advance.

  2. Answer
    Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 12 Jan 2010 Link to this post

    Hello Srinivas Nilagiri,

    You will need to set the AutoPostBackOnTransfer property to true in order to have the transfer functionality work. The client-side only transfer works only when there are no AJAX controls in the template. Since you have RadToolTip in your template, the page should be postedback, because there is no way to initialize the tooltip entirely on the client. In addition you will need to hook on the Transferred event of the source RadListBox and use the following code:

    void rlbSource_Transferred(object sender, RadListBoxTransferredEventArgs e)
        {
            foreach (RadListBoxItem item in e.Items)
            {
                item.DataBind();
            }
        }

    This is needed for evaluating the databinding expressions. I have prepared sample project demonstrating the approach. You can find it as an attachment.

    Regards,
    Genady Sergeev
    the Telerik team

    Instantly find answers to your questions on the new Telerik Support Portal.
    Watch a video on how to optimize your support resource searches and check out more tips on the blogs.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. Srinivas Nilagiri
    Srinivas Nilagiri avatar
    14 posts
    Member since:
    Dec 2009

    Posted 12 Jan 2010 Link to this post

    Hi Genady Sergeev ,
    Thanks for the reply. I implemented the same after following an example here. For those who are into the same problem and want to bind attributes programatically here is the code
    protected void RadListBox1_ItemDataBound(object sender, RadListBoxItemEventArgs e)  
        {  
            BusinessObject obj = (BusinessObject )e.Item.DataItem;  
            e.Item.Attributes.Add("attribute Name", obj.Propertyname);  
            e.Item.DataBind();  
        } 

    Regards
  5. Belal
    Belal avatar
    1 posts
    Member since:
    Dec 2011

    Posted 21 Dec 2011 Link to this post

    You will need to set the AutoPostBackOnTransfer property to true in order to have the transfer functionality work. The client-side only transfer works only when there are no AJAX controls in the template. Since you have RadToolTip in your template, the page should be postedback, because there is no way to initialize the tooltip entirely on the client. In addition you will need to hook on the Transferred event of the source RadListBox and use the following code: 

    how transfer item template does not contains ajax control  
  6. Andrew Galea
    Andrew Galea avatar
    22 posts
    Member since:
    Nov 2009

    Posted 12 Jan 2012 Link to this post

    I have found that the solution provided in fact does not work when the transfer mode is "Copy".

    The code you have proposed (posted below) performs a DataBind on the item you just just transferred in the Source ListBox, not the destination when TransferMode = "Copy"

    void rlbSource_Transferred(object sender, RadListBoxTransferredEventArgs e)
        {
            foreach (RadListBoxItem item in e.Items)
            {
                item.DataBind();
            }
        }

     To get a handle on the actual item in the destination ListBox I had to use the following code snippet.

    protected void factionEntity_Transferred(object sender, RadListBoxTransferredEventArgs e)
            {
                foreach (RadListBoxItem item in e.Items)
                {
                    foreach (RadListBoxItem existingItem in listEntityListBox.Items)
                    {
                        if (item.Value == existingItem.Value)
                        {
                            existingItem.DataBind();
                            break;
                        }
                    }
                }           
            }

    So basically it iterates through the items in the destination ListBox (which now includes the item you just transferred) and data binds it.  This is not a very elegant solution but it is the only way I can get the transfer to work in Copy mode.

    Anyone have any better way to do this?

    Regards,
    Andrew
  7. Andrew Galea
    Andrew Galea avatar
    22 posts
    Member since:
    Nov 2009

    Posted 12 Jan 2012 Link to this post

    Another slightly more elegant way to do this is:

    protected void factionEntity_Transferred(object sender, RadListBoxTransferredEventArgs e)
            {
                e.DestinationListBox.Items[listEntityListBox.Items.Count - 1].DataBind();               
            }

    Note that this assumes the item you transferred is placed at the end of the ListBox.Items array.

    Note this is only needed when the TransferMode="Copy".  The originally proposed solution works fine when the TransferMode="Move".

    Regards,
    Andrew

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