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.

  • DefaultVB.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='http://www.w3.org/1999/xhtml'>
<head runat="server">
    <title>Telerik ASP.NET Example</title>
    <link rel="stylesheet" type="text/css" href="styles.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">
        <label for="RadSearchBox1"></label>
        <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" Width="500"
            DataSourceID="SqlDataSource1"
            EmptyMessage="Search for athlete"
            MaxResultCount="20"
            DataTextField="Name">
            <DropDownSettings Height="400">
                <HeaderTemplate>
                    <ul>
                        <li class="col1">Name</li>
                        <li class="col2">Country</li>
                        <li class="col3">Sport</li>
                    </ul>
                </HeaderTemplate>
                <ItemTemplate>
                    <ul>
                        <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>
                    </ul>
                </ItemTemplate>
            </DropDownSettings>
        </telerik:RadSearchBox>
    </div>

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

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

Support & Learning Resources

Find Assistance