New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

Item Templates

You can control the way items are rendered by using the ItemTemplate property of RadListBox. Do not forget to call the DataBind method if you are using databinding expressions (<%# %>) in the template

Example

ASPX

<telerik:RadListBox runat="server" ID="RadListBox1">
	<ItemTemplate>
		<img src='<%# DataBinder.Eval(Container, "Value") %>' />
		<%# DataBinder.Eval(Container, "Text") %> -
		<%# DataBinder.Eval(Container, "Attributes['Price']") %>
	</ItemTemplate>
</telerik:RadListBox>

C#

public void Page_Load(object sender, EventArgs e)
{
	if (!Page.IsPostBack)
	{
		RadListBox1.DataBind();
	}
}

VB.NET

Public Sub Page_Load(sender As Object, e As EventArgs) Handles Me.Load
	If Not Page.IsPostBack Then
		RadListBox1.DataBind()
	End If
End Sub
  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="true" CodeFile="DefaultVB.aspx.vb" Inherits="ListBox.Examples.Functionality.Templates.DefaultVB" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html>
<html xmlns='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link href="styles.css" rel="stylesheet" type="text/css" />
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <div class="demo-container">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">
            <div class="order-panel">
                <label class="product-list">
                    Product list</label>
                <label class="detail">
                    Detail View &amp; Purchase</label>
                <telerik:RadListBox RenderMode="Lightweight" ID="RadListBox1" runat="server" AllowTransfer="true" AutoPostBackOnTransfer="true"
                    Height="200px" OnTransferred="RadListBox1_Transferred" SelectionMode="Multiple"
                    TransferToID="RadListBox2" Width="215px" Skin="Outlook">
                    <buttonsettings showtransferall="false" verticalalign="Middle"></buttonsettings>
                    <itemtemplate>
                        <img class="product-image" src='images/<%# DataBinder.Eval(Container, "Value")%>'
                            alt="product image">
                        <span class="product-title">
                            <%# DataBinder.Eval(Container, "Text")%></span> <span class="bearing">1 bearing</span>
                    </itemtemplate>
                    <items>
                        <telerik:RadListBoxItem Text="Spinning Reel 1" Value="reel1_thumb.png" price="99"
                            Selected="true"></telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 2" Value="reel2_thumb.png" price="199">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 3" Value="reel3_thumb.png" price="99">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 4" Value="reel4_thumb.png" price="299">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 5" Value="reel5_thumb.png" price="199">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 6" Value="reel6_thumb.png" price="99">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 7" Value="reel7_thumb.png" price="299">
                        </telerik:RadListBoxItem>
                        <telerik:RadListBoxItem Text="Spinning Reel 8" Value="reel8_thumb.png" price="199">
                        </telerik:RadListBoxItem>
                    </items>
                </telerik:RadListBox>
                <telerik:RadListBox RenderMode="Lightweight" runat="server" ID="RadListBox2" Height="200px" Width="273px" CssClass="RadListBoxRight"
                    SelectionMode="Multiple" Skin="Outlook">
                    <itemtemplate>
                        <img class="product-image" src='images/<%# DataBinder.Eval(Container, "Value")%>'
                            alt="product image">
                        <span class="detail-title">
                            <%# DataBinder.Eval(Container, "Text")%></span> <span class="bearing">1 bearing</span>
                        <ul class="details">
                            <li>
                                <label>
                                    Price:</label>
                                <span>
                                    <%# Convert.ToInt32(DataBinder.Eval(Container, "Attributes['Price']")).ToString("C0") %></span>
                            </li>
                            <li>
                                <label>
                                    Quantity:</label>
                                <telerik:RadNumericTextBox RenderMode="Lightweight" runat="server" ID="QuantityTextBox" Width="60px" MinValue="1"
                                    MaxValue="10" ShowSpinButtons="true" Value="1" NumberFormat-DecimalDigits="0" Skin="Outlook">
                                </telerik:RadNumericTextBox>
                            </li>
                        </ul>
                    </itemtemplate>
                    <items>
                        <telerik:RadListBoxItem Text="Spinning Reel 9" Value="reel9.png" price="99"></telerik:RadListBoxItem>
                    </items>
                </telerik:RadListBox>
            </div>
        </telerik:RadAjaxPanel>
    </div>
</asp:content>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance