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

Server-side Templates

RadSearchBox supports server templates of its drop-down items. If no ItemTemplate is specified, the items are rendered using their Text property as plain text. If you specify an ItemTemplate, however, the respective template is used for rendering. One can also easily set header and footer templates to the AutoComplete dropdown in RadSearchBox.

  • DefaultCS.aspx
  • styles.css
<%@ Page  Inherits="Telerik.QuickStart.QsfPage" %>

<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!DOCTYPE html>
<html xmlns=''>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.css" />

    <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:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" Width="500"
            DataSourceID="SqlDataSource1" EmptyMessage="Search for athlete"
            <DropDownSettings Height="400">
                        <li class="col1">Name</li>
                        <li class="col2">Country</li>
                        <li class="col3">Sport</li>
                        <li class="col1">
                            <%# DataBinder.Eval(Container.DataItem, "Name") %></li>
                        <li class="col2">
                            <%# DataBinder.Eval(Container.DataItem, "Country") %></li>
                        <li class="col3">
                            <%# DataBinder.Eval(Container.DataItem, "Sport") %></li>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
        SelectCommand="SELECT TOP 20 athletes.fullName AS Name, AS Country, AS Sport
            FROM [athletes] as athletes 
            JOIN [countries] as countries 
            ON = 
            JOIN [sports] as sports 
            ON ="></asp:SqlDataSource>


Support & Learning Resources

Find Assistance