ListBox - Item Templates

  • product image Spinning Reel 1 1 bearing
  • product image Spinning Reel 2 1 bearing
  • product image Spinning Reel 3 1 bearing
  • product image Spinning Reel 4 1 bearing
  • product image Spinning Reel 5 1 bearing
  • product image Spinning Reel 6 1 bearing
  • product image Spinning Reel 7 1 bearing
  • product image Spinning Reel 8 1 bearing
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="ListBox.Examples.Functionality.Templates.DefaultCS" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<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>

Find Assistance

Help Us Improve

Was this example helpful?