Problem with transfer using ItemTemplate

16 posts, 0 answers
  1. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 03 May 2010 Link to this post

    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
  2. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 06 May 2010 Link to this post

    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.
  3. UI for ASP.NET Ajax is Ready for VS 2017
  4. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 06 May 2010 Link to this post

    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
  5. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 11 May 2010 Link to this post

    Good Morning,

    I have not found a solution to this.  This seems like it should be simple enough; there is even a demo on the Telerik site showing the transfer from one RadListBox (using ItemTemplates)  to another.  The only difference here is that I'm trying to bind the listbox to an Xml datasource (which I would think shouldn't matter what my datasource is). 

    I've kept my code examples as simple as I can in hopes of getting help from the forum.  Is there anybody in the forum who can assist me with this issue?

    Thanks,
    James
  6. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 12 May 2010 Link to this post

    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

    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.
  7. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 14 May 2010 Link to this post

    Genady,

    Thank you so much for getting this to work.  I was able to implement your changes into my project and it worked great!

    I should add for anybody else using this solution, on the onTransferred event, I had to add an if(item.source == "sourceRadListBox") otherwise the transfer back from the DestinationRadListBox would not work.

    Thanks,
    James


  8. Joseph Baker
    Joseph Baker avatar
    17 posts
    Member since:
    Jul 2006

    Posted 15 Dec 2010 Link to this post

    Can you show me the code you changed to get the transfer from the destination back to the source to work? That is where I am stuck now but my item does not have a property of source.

    Thanks
  9. jaclimer
    jaclimer avatar
    7 posts
    Member since:
    Aug 2007

    Posted 15 Dec 2010 Link to this post

    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();
                    }
                }
            }
  10. Joseph Baker
    Joseph Baker avatar
    17 posts
    Member since:
    Jul 2006

    Posted 15 Dec 2010 Link to this post

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

            }


                }

  11. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 21 Dec 2010 Link to this post

    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.
  12. Duneel
    Duneel avatar
    5 posts
    Member since:
    Dec 2010

    Posted 17 Jun 2011 Link to this post

    Hi,

    I want to transfer items only using client-side code without any post-backs. How should I do that? And I have an ItemTemlate in the list.

    Thanks!
    Duneel
  13. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 22 Jun 2011 Link to this post

    Hello Duneel,

    Unfortunately, it is not possible to transfer templated items on the client.

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

  14. Colin
    Colin avatar
    8 posts
    Member since:
    Mar 2012

    Posted 09 May 2012 Link to this post

    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!
  15. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 15 May 2012 Link to this post

    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.
  16. Matt Howeson
    Matt Howeson avatar
    8 posts
    Member since:
    May 2006

    Posted 08 Nov 2012 Link to this post

    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
  17. Genady Sergeev
    Admin
    Genady Sergeev avatar
    1596 posts

    Posted 13 Nov 2012 Link to this post

    Hello James,

    Thank you for sharing this with the community, indeed it handles the case where the both templates are the same, however, please note that the template created using jQuery will be lost upon postback.

    Greetings,
    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.
Back to Top
UI for ASP.NET Ajax is Ready for VS 2017