RadSearchBox - Telerik ASP.NET SearchBox

Find information about the achievements of the Olympic champions.
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

The following demo shows how RadSearchBox can effectively search in large Datasets. The usage of DataKeyNames collection demonstrates how additional information could be stored for each result and then reused on the server once a result is selected. Search operation could be performed per "sport" basis by selecting a specific sport from the search context.

About RadSearchBox for ASP.NET AJAX

Telerik RadSearchBox for ASP.NET AJAX provides the user the ability to write text in an input field with an optional autocomplete functionality. The control has a default “search” button, which triggers an event containing the search value. The user can use this event to manually show data filtered by this value, in a manner he chooses (RadGrid, RadListView etc.). The control also has a collection of image buttons, which the user can use to implement additional custom logic.

RadSearchBox can be bound to various data sources. It is populated with data by either server-side binding (ASP.NET Data Source controls), or client-side binding (Web service, WCF service, ODATA).

RadSearchBox and 90+ other controls are part of UI for ASP.NET AJAX, a comprehensive toolset taking care of the common functionality of your application, while leaving you with more time to work on its business logic.

Key Features

  • DropDownHeader/Footer Templates
  • Client/Server Templates
  • Search Context
  • Keyboard Navigation
  • Filter (StartsWith/Contains)
  • MinFilterLength
  • MaxResultsCount
  • Passing Custom Context Information

More about RadSearchBox for ASP.NET AJAX
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox_Examples_Overview_DefaultCS"  %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<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" />

    <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server">
        <div class="demo-container no-bg">

            <span class="info">Find information about the achievements of the Olympic champions.</span>

            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
                CssClass="searchBox" Skin="Silk"
                Width="460" DropDownSettings-Height="300"
                DataSourceID="SqlDataSource1"
                DataTextField="fullName"
                DataValueField="id"
                DataKeyNames="sport,birthday,country"
                EmptyMessage="Search"
                Filter="StartsWith"
                MaxResultCount="20"
                OnDataSourceSelect="RadSearchBox1_DataSourceSelect"
                OnSearch="RadSearchBox1_Search">
                <SearchContext DataSourceID="SqlDataSource2" DataTextField="name" DataKeyField="id" DropDownCssClass="contextDropDown"></SearchContext>
            </telerik:RadSearchBox>

            <asp:Label runat="server" ID="FullName" CssClass="fullName"></asp:Label>
            <asp:Label runat="server" ID="LabelCountry" CssClass="country"></asp:Label>
            <asp:Label runat="server" ID="LabelBirthday" CssClass="birthday"></asp:Label>
            <asp:Label runat="server" ID="LabelSport" CssClass="sport"></asp:Label>
            <asp:Label runat="server" ID="Gold" CssClass="gold"></asp:Label>
            <asp:Label runat="server" ID="Silver" CssClass="silver"></asp:Label>
            <asp:Label runat="server" ID="Bronze" CssClass="bronze"></asp:Label>

        </div>
    </telerik:RadAjaxPanel>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
        SelectCommand="SELECT * FROM [athletes]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server"
        ConnectionString="<%$ ConnectionStrings:OlympicsConnectionString %>"
        SelectCommand="SELECT [id], [name] FROM [sports] WHERE ([category] IS NULL) ORDER BY [name]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?