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

Client Templates

RadComboBox now supports client templates. The templates are declared in the ClientItemTemplate tag and support the following expressions for evaluating code:
  • #= ... # - Data - Evaluates the JavaScript code expression or a string property from the data item and outputs the result in the template.
  • # ... # - Code - Evaluates the JavaScript code expression inside. Does not output value.
  • #: ... # - HTML-encode - Same as the data expression, but HTML-encodes the result.
The templates are applied automatically to all items loaded through web service. To apply a client template to an arbitrary item, you have to call the bindTemplate() function on that item: 
	function addItem(itemText) 
	{
		var item = new Telerik.Web.UI.RadComboBoxItem();
		var combo = $find('<%=RadComboBox1.ClientID%>'); 
		item.set_text(itemText);
		combo.get_items().add(item);
		item.bindTemplate();
	}
You can also define a specific template to individual items on the client: 
	function setTemplate(item) 
	{
		item.set_clientTemplate("Item Text: #= Text #");
		item.bindTemplate();
	}
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" ResponseEncoding="UTF-8"Inherits="ComboBox.Examples.Functionality.ClientTemplates.DefaultCS" Language="c#" %>

<%@ 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 size-narrow">
        <telerik:RadAjaxPanel runat="server" ID="RadAjaxPanel1">

            <telerik:RadComboBox RenderMode="Lightweight" ID="RadComboBox1" runat="server" Height="400" Width="300" EmptyMessage="Select a Customer"
                EnableLoadOnDemand="true" ShowMoreResultsBox="true" EnableVirtualScrolling="true">
                <HeaderTemplate>
                    <h2>Customers</h2>
                </HeaderTemplate>
                <ClientItemTemplate>
                    <div class="imageWrap">
                        <img src='#=Attributes.ImageUrl#' alt=" #= Text # " />
                    </div>
                    <div>
                        <ul class="personDetails">
                            <li class="name"><span> #= Text # </span></li>
                            <li class="title"><span> #= Attributes.ContactTitle # </span></li>
                            <li class="address"><span> #= Attributes.City # </span></li>
                        </ul>
                    </div>
                </ClientItemTemplate>
                <WebServiceSettings Method="GetCustomers" Path="defaultcs.aspx" />
            </telerik:RadComboBox>

            <telerik:RadButton RenderMode="Lightweight" runat="server" Text="Select" ID="Button1" OnClick="Button1_Click" />

            <asp:Literal ID="LiteralResults" runat="server" />

        </telerik:RadAjaxPanel>
    </div>

    </form>
</body>
</html>

Support & Learning Resources

Find Assistance