SearchBox - Server-side Templates

Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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 PUBLIC "-//W3C//DTD XHTML 1.1//EN" "">
<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

Help Us Improve

Was this example helpful?