SearchBox - Grid Filtered By SearchBox



Contact NameSupplier ID
Charlotte Cooper1
Shelley Burke2
Regina Murphy3
Yoshi Nagase4
Antonio del Valle Saavedra5
Mayumi Ohno6
Ian Devling7
Peter Wilson8
Lars Peterson9
Carlos Diaz10

Demo Configurator

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

This demo shows how to use the RadSearchBox as a filter based on which a RadGrid control is populated with data.
The server-side "Search" event is used in order to filter the data source based on the entered text.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox_Examples_ApplicationScenarios_GridFilteredBySearchBox_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 size-wide">
            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
                DataSourceID="dllDataSource"
                DataKeyNames="SupplierID"
                DataTextField="ContactName"
                DataValueField="SupplierID"
                EnableAutoComplete="true"
                ShowSearchButton="false"
                Width="300"
                OnSearch="RadSearchBox1_Search">
                <DropDownSettings Width="300" />
            </telerik:RadSearchBox>
            <br />
            <asp:Label ID="Label1" runat="server"></asp:Label>
              <br />
            <telerik:RadGrid RenderMode="Lightweight" ID="RadGrid1" runat="server" DataSourceID="gridDataSource"></telerik:RadGrid>
        </div>

    </telerik:RadAjaxPanel>

    <asp:SqlDataSource ID="dllDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT TOP 20 [ContactName], [SupplierID] FROM [Suppliers]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="gridDataSource" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT TOP 10 [ContactName], [SupplierID] FROM [Suppliers]"></asp:SqlDataSource>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <qsf:DropDownList runat="Server" ID="FilterComboBox" AutoPostBack="true" Label="Filter">
                                <Items>
                                    <telerik:DropDownListItem Text="Contains" Value="Contains" />
                                    <telerik:DropDownListItem Text="StartsWith" Value="StartsWith" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

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

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?