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

ItemTemplate transfer empty

6 Answers 144 Views
ListBox
This is a migrated thread and some comments may be shown as answers.
Mikael
Top achievements
Rank 1
Mikael asked on 25 Mar 2014, 04:50 PM
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.

6 Answers, 1 is accepted

Sort by
0
Mikael
Top achievements
Rank 1
answered on 25 Mar 2014, 04:55 PM
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
0
Princy
Top achievements
Rank 2
answered on 26 Mar 2014, 05:07 AM
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.
0
Mikael
Top achievements
Rank 1
answered on 26 Mar 2014, 08:47 AM
Thank you Princy.
It works great now.
0
Adrián
Top achievements
Rank 1
answered on 10 Feb 2017, 04:21 PM

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

0
Matt
Top achievements
Rank 1
answered on 03 Sep 2019, 04:54 PM

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>
0
Peter Milchev
Telerik team
answered on 06 Sep 2019, 12:27 PM

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.
Tags
ListBox
Asked by
Mikael
Top achievements
Rank 1
Answers by
Mikael
Top achievements
Rank 1
Princy
Top achievements
Rank 2
Adrián
Top achievements
Rank 1
Matt
Top achievements
Rank 1
Peter Milchev
Telerik team
Share this question
or