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='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">
            <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