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

Problem with transfer using ItemTemplate

15 Answers 410 Views

ListBox

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

jaclimer asked on 04 May 2010, 02:51 AM

Hello,

I'm having trouble getting a RadListBox to transfer correctly. The source radlistbox loads as expected but the destination radlistbox does not seem to have data to bind to. After the transfer, empty rows appear in the destination radlistbox. Can anyone offer advice as to what I'm missing?

On Load (if(!IsPostBack)...

    
            DataSet ds = new DataSet(); 
        
            ds.ReadXml(Server.MapPath("~/_sample_data/CustomersAndDogs.xml")); 
        
            SourceRadListBox.DataSource = ds; 
        
            SourceRadListBox.DataBind();

The aspx code is as follows:

    
            <div style="width: 600px;"> 
        
                    <telerik:radlistbox  
        
                        id="SourceRadListBox"  
        
                        runat="server"  
        
                        skin="WebBlue"  
        
                        allowtransfer="True" 
        
                        transfermode="Copy"  
        
                        transfertoid="DestinationRadListBox"  
        
                        height="200px"  
        
                        width="250px" 
        
                        datasortfield="DogName" 
        
                        SelectionMode="Multiple"             
        
                        > 
        
                        <EmptyMessageTemplate> 
        
                            No dogs found</EmptyMessageTemplate> 
        
                        <ItemTemplate> 
        
                            <div style="width: 100%;"> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("DogName") %></div> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("OwnerFullName") %></div> 
        
                            </div> 
        
                        </ItemTemplate> 
        
                        <Items> 
        
                        </Items> 
        
                    </telerik:radlistbox> 
        
                    <telerik:radlistbox id="DestinationRadListBox" runat="server" width="250px" height="200px"> 
        
                        <EmptyMessageTemplate> 
        
                            No dogs selected</EmptyMessageTemplate> 
        
                        <ItemTemplate> 
        
                            <div style="width: 100%;"> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("DogName") %></div> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <img src='<%# Eval("DogThumbNailImageUrl") %>' height="40px" width="40px" alt="" /></div> 
        
                            </div>                 
        
                        </ItemTemplate> 
        
                    </telerik:radlistbox> 
        
                    </div>

Thanks,
James

15 Answers, 1 is accepted

answered on 06 May 2010, 09:15 AM

Hi jaclimer,

When using templates the following conditions should be met in order to get the transfer functionality working:

1) You must set the AutoPostbackOnTransfer property of the source RadListBox to true.
2) Add event handler for the OnTransferred event of the source RadListBox and apply the following code there:

void rlbSource_Transferred(object sender, RadListBoxTransferredEventArgs e)

{

foreach (RadListBoxItem item in e.Items)

{

item.DataBind();

}

Regards,
Genady Sergeev
the Telerik team

Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Public Issue Tracking system and vote to affect the priority of the items.

answered on 06 May 2010, 03:34 PM

radlistboxtransferresults.png

Genady,

Thank you for your response. After adding an ontransferred event handler, I was still not able to get the destination RadListBox to render the template. Now my source RadListBox loses the data for its ItemTemplate and the destination adds a blank row. Please see the attached image.

The following code is pretty much all I have in this sample project. I've tried to keep it simple to figure out what is not working correctly.

aspx:

    
            <%@ Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="Default" %> 
        
            <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> 
        
            <html xmlns="http://www.w3.org/1999/xhtml"> 
        
            <head runat="server"> 
        
                <title></title> 
        
                <telerik:RadStyleSheetManager ID="RadStyleSheetManager1" runat="server" /> 
        
            </head> 
        
            <body> 
        
                <form id="form1" runat="server"> 
        
                <telerik:RadScriptManager ID="RadScriptManager1" runat="server"> 
        
                    <Scripts> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.Core.js" /> 
        
                        <asp:ScriptReference Assembly="Telerik.Web.UI" Name="Telerik.Web.UI.Common.jQuery.js" /> 
        
                    </Scripts> 
        
                </telerik:RadScriptManager> 
        
                <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server"> 
        
                </telerik:RadAjaxManager> 
        
                <telerik:RadSkinManager ID="RadSkinManager1" runat="server" Skin="WebBlue"> 
        
                </telerik:RadSkinManager> 
        
                <telerik:RadAjaxPanel  runat="server" ID="RadAjaxPanel1"> 
        
                <div> 
        
                    <div style="width: 100%;display:block;"> 
        
                        <div style="width: 50%; float: left;"> 
        
                            <asp:Image ID="SelectedDogImage" runat="server" Height="50px" Width="50px" /> 
        
                        </div> 
        
                    </div> 
        
                    <p>&nbsp;</p> 
        
                    <telerik:RadListBox ID="SourceRadListBox" runat="server" Skin="WebBlue" AllowTransfer="True" 
        
                        TransferMode="Copy" TransferToID="DestinationRadListBox" Height="200px"  
        
                        Width="400px" DataSortField="DogName" DataKeyField="DogId"  
        
                        SelectionMode="Multiple" AutoPostBackOnTransfer="True"  
        
                        ontransferred="SourceRadListBox_Transferred"> 
        
                        <EmptyMessageTemplate> 
        
                            No dogs found</EmptyMessageTemplate> 
        
                        <ItemTemplate> 
        
                            <div style="width: 100%;"> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("DogName") %></div> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("OwnerFullName") %></div> 
        
                            </div> 
        
                        </ItemTemplate> 
        
                    </telerik:RadListBox> 
        
                    <telerik:RadListBox ID="DestinationRadListBox" runat="server" Width="400px"  
        
                        Height="200px"> 
        
                        <EmptyMessageTemplate>No dogs selected</EmptyMessageTemplate> 
        
                       <ItemTemplate> 
        
                            <div style="width: 100%;"> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <%# Eval("DogName") %></div> 
        
                                <div style="width: 50%; float: left;"> 
        
                                    <img src='<%# Eval("DogThumbNailImageUrl") %>' alt='' /></div> 
        
                            </div> 
        
                        </ItemTemplate> 
        
                    </telerik:RadListBox> 
        
                </div> 
        
                </telerik:RadAjaxPanel> 
        
                </form> 
        
            </body> 
        
            </html>

CodeBehind

    
            using System; 
        
            using System.Web; 
        
            using System.Web.UI; 
        
            using System.Web.UI.WebControls; 
        
            using System.Data; 
        
            using System.Configuration; 
        
            using System.Web.Security; 
        
            using System.Web.UI.WebControls.WebParts; 
        
            using System.Web.UI.HtmlControls; 
        
            using Telerik.Web.UI; 
        
            public partial class Default : System.Web.UI.Page  
        
            { 
        
                protected void Page_Load(object sender, EventArgs e) 
        
                { 
        
                    if (!IsPostBack) 
        
                    { 
        
                        LoadSampleData(); 
        
                    } 
        
                } 
        
                private void LoadSampleData() 
        
                { 
        
                    DataSet ds = new DataSet(); 
        
                    ds.ReadXml(Server.MapPath("~/SampleData/CustomersAndDogs.xml")); 
        
                    SourceRadListBox.DataSource = ds; 
        
                    SourceRadListBox.DataBind(); 
        
                } 
        
                protected void SourceRadListBox_Transferred(object sender, RadListBoxTransferredEventArgs e) 
        
                { 
        
                    foreach (RadListBoxItem listBoxItem in e.Items) 
        
                    { 
        
                        listBoxItem.DataBind(); 
        
                    } 
        
                } 
        
            }

xml file:

    
            <?xml version="1.0"  encoding="utf-8" ?> 
        
            <Dogs> 
        
              <Dog DogId="1" DogName="Zsazsa" OwnerFirstName="James" OwnerLastName="Climer" OwnerFullName="James Climer"  DogThumbNailImageUrl="~/_images/dogImages/dog0001.jpg" /> 
        
              <Dog DogId="2" DogName="Benji" OwnerFirstName="Erica" OwnerLastName="Tabby" OwnerFullName="Erica Tabby"  DogThumbNailImageUrl="~/_images/dogImages/dog0002.jpg" /> 
        
              <Dog DogId="3" DogName="Tabbi" OwnerFirstName="Linda" OwnerLastName="Baker" OwnerFullName="Linda Baker"  DogThumbNailImageUrl="~/_images/dogImages/dog0003.jpg" /> 
        
              <Dog DogId="4" DogName="Lassie" OwnerFirstName="John" OwnerLastName="Allen" OwnerFullName="John Allen"  DogThumbNailImageUrl="~/_images/dogImages/dog0004.jpg" /> 
        
              <Dog DogId="5" DogName="Bolt" OwnerFirstName="Admam" OwnerLastName="Ericcson" OwnerFullName="Adam Ericcson"  DogThumbNailImageUrl="~/_images/dogImages/dog0005.jpg" /> 
        
              <Dog DogId="6" DogName="Barby" OwnerFirstName="Frank" OwnerLastName="Tamm" OwnerFullName="Frank Tamm"  DogThumbNailImageUrl="~/_images/dogImages/dog0006.jpg" /> 
        
              <Dog DogId="7" DogName="Ballball" OwnerFirstName="Glenda" OwnerLastName="Tamm" OwnerFullName="Glenda Tamm"  DogThumbNailImageUrl="~/_images/dogImages/dog0007.jpg" /> 
        
              <Dog DogId="8" DogName="Baker" OwnerFirstName="Erika " OwnerLastName="Smith" OwnerFullName="Erika Smith"  DogThumbNailImageUrl="~/_images/dogImages/dog0008.jpg" /> 
        
              <Dog DogId="9" DogName="Cutter" OwnerFirstName="Randy" OwnerLastName="Smith" OwnerFullName="Randy Smith"  DogThumbNailImageUrl="~/_images/dogImages/dog0009.jpg" /> 
        
              <Dog DogId="10" DogName="Lady" OwnerFirstName="Randle" OwnerLastName="Smith" OwnerFullName="Randle Smith"  DogThumbNailImageUrl="~/_images/dogImages/dog0010.jpg" /> 
        
              <Dog DogId="11" DogName="Lad" OwnerFirstName="Linda" OwnerLastName="Alexander" OwnerFullName="Linda Alexander"  DogThumbNailImageUrl="~/_images/dogImages/dog0011.jpg" /> 
        
              <Dog DogId="12" DogName="Benny" OwnerFirstName="Brenda" OwnerLastName="Cutler" OwnerFullName="Brenda Cutler"  DogThumbNailImageUrl="~/_images/dogImages/dog0012.jpg" /> 
        
              <Dog DogId="13" DogName="TallTail" OwnerFirstName="Jim" OwnerLastName="Jacobs" OwnerFullName="Jim Jacobs"  DogThumbNailImageUrl="~/_images/dogImages/dog0013.jpg" /> 
        
            </Dogs>

Could this be because I'm using a DataSet as a data source?

Thanks,
James

answered on 12 May 2010, 12:56 PM

templates.zip

Hi jaclimer,

You can find sample project that demonstrates how to transfer templated items from source to destination ,when the transfer mode is copy, as an attachment. I have used your sample markup and the xml file that you use.

Kind regards,
Genady Sergeev
the Telerik team

answered on 16 Dec 2010, 01:18 AM

It's been a while since I've looked at this, but I think this is what you need:

void SourceRadListBox_Transferring(object sender, Telerik.Web.UI.RadListBoxTransferringEventArgs e)

{

if (e.SourceListBox.ID == "SourceRadListBox")

{

e.Cancel = true; // Set cancel to true if you want to copy the listitem, comment out to move the listitem

foreach (Telerik.Web.UI.RadListBoxItem item in e.Items)

{

var dataItem = Serializer.Deserialize<DogInfo>(item.Attributes["dataItem"]);

var destItem = new Telerik.Web.UI.RadListBoxItem();

e.DestinationListBox.Items.Add(destItem);

destItem.DataItem = dataItem;

destItem.DataBind();

}

answered on 16 Dec 2010, 05:25 AM

Thanks for the reply. I added that bit of code and I can move from the left to the right with out problems but when I try to remove an item from the right it disappears but does not show up in the left side.

if (e.SourceListBox.ID == "RadListBox1")
            {
        
      //  e.Cancel = true;
 
       foreach (RadListBoxItem item in e.Items)
        {
            RadListBoxItem destItem = new RadListBoxItem();
 
                BillShipments dataItem;
 
                dataItem = Serializer.Deserialize<BillShipments>(item.Attributes["dataItem"]);
 
                e.DestinationListBox.Items.Add(destItem);
 
                destItem.DataItem = dataItem;
       
            destItem.DataBind();
          //  e.SourceListBox.Items.Remove(item);
 
        }
 
 
            }

answered on 21 Dec 2010, 12:53 PM

Templates.zip

Hi Joseph Baker,

I am attaching sample project that demonstrates how to transfer templated items back and forth from destination.

Best wishes,
Genady Sergeev
the Telerik team

Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

answered on 09 May 2012, 08:49 PM

I realize this is old, but I ran across the same issue, where I couldn't transfer templated items.
This is what I'm using to transfer templated items on the client-side:

function lbTransfer(sender, ev) {

var items = ev.get_items();

var source = ev.get_sourceListBox();

var dest = ev.get_destinationListBox();

for (var i = 0; i < items.length; i++) {

var item = new Telerik.Web.UI.RadListBoxItem();

var oldItem = items[i];

var destItems = dest.get_items();

destItems.insert(destItems.length, item);

var span = document.createElement('span');

span.className = 'rlbTemplate';

span.innerHTML = oldItem._textElement.innerHTML;

item._element.appendChild(span);

source.get_items().remove(items[i]);

}

This is called in the OnClientTransferring event of the left-side list box.
This call: destItems.insert(destItems.length, item);
Is interchangeable with destItems.add(item);

Unfortunately, I could not get it to actually stick server-side, and it was retaining values as if no edits had occurred. So I made two hidden fields and had the JavaScript update those with the values of the list items at the end of the above script.
And it works!

answered on 15 May 2012, 08:23 AM

Templates.zip

Hello James,

As stated in my previous replay, it is not possible to transfer templated items on the client. One should use server-side transfer + AJAX in order to minimize the overhead. I am attaching sample project that demonstrates how server-side transfer of templated items would look like.

Regards,
Genady Sergeev
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.

answered on 08 Nov 2012, 05:43 PM

Actually I don't think it is that difficult to come up with a workaround for this. As long as both templates are the same look you can use a simple bit of jquery code to grab the html and set it in the dropped element.

var item1 = new Telerik.Web.UI.RadListBoxItem();

item1.set_value(eventArgs.get_sourceItem().get_value());

listbox.trackChanges();

listbox.get_items().add(item1);

item1.select();

listbox.commitChanges();

// get html of dragged element template

var newel = $($(eventArgs.get_sourceItem().get_element()).html());

// set html of dropped element, and reset size accordingly

$(".droparea li.rlbSelected").html(newel);

Above code looks for the newly selected list item, and sets the html from the html source of the dragged element.

Works fine for us, hope it helps someone else.

Thanks,

Matt

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

Problem with transfer using ItemTemplate

15 Answers, 1 is accepted