ItemTemplate transfer empty

7 posts, 0 answers
  1. Mikael
    Mikael avatar
    11 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2014 Link to this post

    Hello,

    I want to transfer an item in a listbox to another listbox like in this example : http://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/templates/defaultcs.aspx
    My problem is when I transfered an item in the second lisbox the item is empty (see the attached file).

    <telerik:RadListBox ID="RLB_References" runat="server" Width="360px" TransferToID="RLB_SelectedReference"
        AutoPostBackOnTransfer="True" AllowTransfer="True" OnTransferred="RLB_References_Transferred">
        <HeaderTemplate>
            <table>
                <tr>
                    <td width="80px">Titre</td>
                    <td width="80px">Référence</td>
                    <td width="80px">Taille</td>
                    <td width="80px">Coloris</td>
                </tr>
            </table
        </HeaderTemplate>
        <ItemTemplate>
            <table>
                <tr>
                    <td width="90px">
                        <%# DataBinder.Eval(Container.DataItem, "Titre") %>
                    </td>
                    <td width="90px">
                        <%# DataBinder.Eval(Container.DataItem, "Reference") %>
                    </td>
                    <td width="90px">
                        <%# DataBinder.Eval(Container.DataItem, "Taille") %>
                    </td>
                    <td width="90px">
                        <%# DataBinder.Eval(Container.DataItem, "Coloris") %>
                    </td>
                </tr>
            </table>  
        </ItemTemplate>
    </telerik:RadListBox>
     
    <telerik:RadListBox ID="RLB_SelectedReference" runat="server" Width="400px">
         <HeaderTemplate>
            <table>
                <tr>
                    <td width="80px">Titre</td>
                    <td width="80px">Référence</td>
                    <td width="80px">Taille</td>
                    <td width="80px">Coloris</td>
                    <td width="80px">Quantité</td>
                </tr>
            </table
        </HeaderTemplate>
        <ItemTemplate>
            <table>
                <tr>
                    <td width="80px">
                        <%# DataBinder.Eval(Container.DataItem, "Titre") %>
                    </td>
                    <td width="80px">
                        <%# DataBinder.Eval(Container.DataItem, "Reference") %>
                    </td>
                    <td width="80px">
                        <%# DataBinder.Eval(Container.DataItem, "Taille") %>
                    </td>
                    <td width="80px">
                        <%# DataBinder.Eval(Container.DataItem, "Coloris") %>
                    </td>
                    <td width="80px">
                        <telerik:RadNumericTextBox runat="server" ID="QuantityTextBox" Width="50px" MinValue="1"
                            ShowSpinButtons="true" Value="1" NumberFormat-DecimalDigits="0">
                        </telerik:RadNumericTextBox>
                    </td>
                </tr>
            </table>  
        </ItemTemplate>
    </telerik:RadListBox>

    private string GetArticleTitle(int nodeId)
        {
            return "title";
        }
     
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!Page.IsPostBack)
            {
                List<tbl_references> references = null;
                using (ReferenceContainer context = new ReferenceContainer())
                {
                    references = context.tbl_references.ToList();
                }
                var datasource = from r in references
                                 let reference = r.Reference
                                 let taille = r.Taille
                                 let coloris = r.Coloris
                                 let titre = GetArticleTitle(r.ArticleNodeId)
                                 select new
                                 {
                                     Reference = reference,
                                     Taille = taille,
                                     Coloris = coloris,
                                     Titre = titre
                                 };
                RLB_References.DataSource = datasource;
                RLB_References.DataBind();
            }
        }
     
        protected void RLB_References_Transferred(object sender, Telerik.Web.UI.RadListBoxTransferredEventArgs e)
        {
            foreach (RadListBoxItem item in e.Items)
            {
                item.DataBind();
            }
        }

    Have you a solution ?

    Thanks.
  2. Mikael
    Mikael avatar
    11 posts
    Member since:
    Mar 2013

    Posted 25 Mar 2014 Link to this post

    I put a breakpoint in the RLB_References_Transferred method and I noticed that :
     - item.Value = { Reference = 1236, Taille = Taille S, Coloris = Rouge, Titre = AUDI TT }
     - item.DataItem = null
  3. Princy
    Princy avatar
    17421 posts
    Member since:
    Mar 2007

    Posted 26 Mar 2014 in reply to Mikael Link to this post

    Hi Mikael

    In your sample code, you are binding directly to the DataItem property of the item. This property is useful when the ListBox is bound to a datasource. So when you transfer the item to the second ListBox, since it is not bound , this property is null. If you want to bind to properties from the DataItem, you should use the ItemDataBound event to map them to properties of the item itself. The best way to store arbitrary properties is to use the item's AttributeCollection. Please have a look into this help documentation for further help.

    Thanks,
    Princy.
  4. Mikael
    Mikael avatar
    11 posts
    Member since:
    Mar 2013

    Posted 26 Mar 2014 Link to this post

    Thank you Princy.
    It works great now.
  5. Adrián
    Adrián avatar
    2 posts
    Member since:
    Dec 2012

    Posted 10 Feb 2017 Link to this post

    Hi, i have a problem displaying attributes values on RadListBox, it returns "Nothing", but in code behind debuging i can see the values.

    this is my code. aspx

     

    <telerik:radlistbox id="RadListBox1" runat="server" skin="Metro" width="220px" height="400px" autopostbackontransfer="true"  OnItemDataBound="RadListBox1_ItemDataBound">

                    <ItemTemplate>

                                    <label>GPSEstatus:</label>
                                    <span><%# DataBinder.Eval(Container, "Attributes['GPSstatusNombre']").ToString()%</span>

                            <%# DataBinder.Eval(Container, "Text") %>

                    </ItemTemplate>
                  
          </telerik:radlistbox>

     

    and in .vb

    Protected Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load

               Dim connection As New SqlConnection(ConfigurationManager.ConnectionStrings("cnnComponentGeoExplorer").ConnectionString)
                Dim strSQL As String

                strSQL = "select * from view_HorasUnidad  Where imei = '" + imei + "' and Fecha >= '" + Fecha + "' and Fecha < dateadd(dd,1,'" + Fecha + "') ORDER By Fecha desc"

                Dim adapter As New SqlDataAdapter(strSQL, connection)
                Dim dt As New DataTable()
                adapter.Fill(dt)

                RadListBox1.DataTextField = "txtHora"
                RadListBox1.DataValueField = "Fecha"

                RadListBox1.DataSource = dt
                RadListBox1.DataBind()

     

    End Sub

     

            Protected Sub RadListBox1_ItemDataBound(sender As Object, e As Telerik.Web.UI.RadListBoxItemEventArgs)
                Dim dataRow As DataRowView = DirectCast(e.Item.DataItem, DataRowView)
                e.Item.Attributes("GPSstatusNombre") = dataRow("GPSstatusNombre").ToString()
            End Sub

     

    Thanks

  6. Matt
    Matt avatar
    99 posts
    Member since:
    Jun 2012

    Posted 03 Sep 2019 in reply to Princy Link to this post

    Any way that you could be a bit more clear? "AttributeCollection" doesn't even appear in the link you provided.

    Also, I've been attempting to use this link: https://demos.telerik.com/aspnet-ajax/listbox/examples/functionality/templates/defaultcs.aspx but in my case, it doesn't work.

    If I don't use the item template, the transferring works fine.

    I posted the code below. The source RLB is populated by an ajax function. When items are selected to the destination, empty items appear. I'm thinking that I have to now manually transfer the selection via ajax or JS?

    function GetDRs(eid) {
                    $.ajax({
                        type: "POST",
                        url: "TC.aspx/GetDRs",
                        data: '{eid: "' + eid + '" }',
                        contentType: "application/json; charset=utf-8",
                        dataType: "json",
                        success: function (data) {
                            if (data.d) {
                                var lb = $find("<%=RLB_Associates_Source.ClientID %>");
                                lb.trackChanges();
                                $.each(data.d, function (index, value) {
                                    for (i = 0; i < lb.get_items().get_count() ; i++) {
                                        if (lb.getItem(i).get_value() == value.EmployeeID) {
                                            var deleteItem = lb.getItem(i);
                                            lb.get_items().remove(deleteItem);
                                        }
                                    }
                                    var item = new Telerik.Web.UI.RadListBoxItem();
                                    item.set_value(value.EmployeeID);
                                    item.set_text(value.DisplayName);
                                    lb.get_items().add(item);
                                });
                                lb.commitChanges();
                            }
                        },
                        error: function (response) {
                            var r = jQuery.parseJSON(response.responseText);
                            alert("Message: " + r.Message);
                            alert("StackTrace: " + r.StackTrace);
                            alert("ExceptionType: " + r.ExceptionType);
                        }
                    });
                };
    <telerik:RadListBox ID="RLB_Associates_Source" runat="server" Height="290px" Width="320px" AllowTransfer="True" TransferToID="RLB_Associates_Destination" TabIndex="3" TransferMode="Move" SelectionMode="Multiple" AllowTransferOnDoubleClick="true" AllowTransferDuplicates="false" EnableDragAndDrop="true" EmptyMessage="..." OnClientDropped="RevertColor" OnClientTransferred="RevertColor" OnClientDropping="RevertColor"/>
                    <telerik:RadListBox ID="RLB_Associates_Destination" runat="server" Height="290px" Width="300px" AllowTransfer="False" TabIndex="4" TransferMode="Move" SelectionMode="Multiple" AllowTransferOnDoubleClick="true" AllowTransferDuplicates="false" EnableDragAndDrop="true" EmptyMessage="..." OnClientDropped="RevertColor" OnClientTransferred="RevertColor" OnClientDropping="RevertColor">
                        <ItemTemplate>
                            <asp:Label ID="L_DisplayName" runat="server" Text='<%# DataBinder.Eval(Container, "DisplayName")%>' /><br />
                            <asp:Label ID="L_EmployeeID" runat="server" Text='<%# DataBinder.Eval(Container, "EmployeeID")%>' /><br />
                            <label id="groupstartdate">Group Start Date:</label><br />
                            <telerik:RadDatePicker ID="RDP_GroupStartDate" runat="server" ShowPopupOnFocus="true" Culture="en-US" TabIndex="3" ToolTip="Select a date" Width="190px" ClientEvents-OnPopupClosing="RevertColor" ClientEvents-OnDateSelected="RevertColor" DateInput-ClientEvents-OnKeyPress="RevertColor" CssClass="hvr-glow">
                                <Calendar ID="Calendar1" runat="server" UseRowHeadersAsSelectors="False" UseColumnHeadersAsSelectors="False" ViewSelectorText="x" ShowRowHeaders="false">
                                    <SpecialDays>
                                        <telerik:RadCalendarDay Repeatable="Today" ItemStyle-BackColor="WhiteSmoke" ItemStyle-Font-Bold="true" ItemStyle-BorderColor="Turquoise" />
                                    </SpecialDays>
                                </Calendar>
                                <DateInput ID="DateInput1" runat="server" TabIndex="3" DisplayDateFormat="M/d/yyyy" DateFormat="M/d/yyyy" LabelWidth=""></DateInput>
                                <DatePopupButton TabIndex="3"></DatePopupButton>
                            </telerik:RadDatePicker>
                        </ItemTemplate>
                    </telerik:RadListBox>
  7. Peter Milchev
    Admin
    Peter Milchev avatar
    861 posts

    Posted 06 Sep 2019 Link to this post

    Hello,

    If the server-side template is used, then a postback is required in order to bind the items added on the client-side.

    If the items need to have the template applied on the client-side without a postback, then the ClientTemplate should be used: 

    Regards,
    Peter Milchev
    Progress Telerik

    Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Back to Top