Listbox with templates - transfer items issue

[Srinivas Nilagiri]

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.

[Genady Sergeev]

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.

[Srinivas Nilagiri]

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

[Belal]

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  

[Andrew Galea]

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

[Andrew Galea]

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