New to Telerik UI for ASP.NET AJAX? Download free 30-day trial

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

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.

  • DefaultVB.aspx
  • DefaultVB.aspx.vb
  • styles.css
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="DefaultVB.aspx.vb" Inherits="SearchBox_Examples_ApplicationScenarios_RepeaterFilteredBySearchBox_DefaultVB" %>

<!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" />

    <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