SearchBox - Search Context

Search products by using RadSearchBox and choose the supplier from the SearchContext to narrow the results in the auto-complete drop down.
All
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Search Context functionality provides context for the search operation. The search context is represented as a simple drop-down giving a choice to select a context item. This feature improves the performance and usability when searching in large data sets.

Type some letter in the search input while the default "All" item is selected and searching is performed through all the items of the DataSource. If you then select some item from the Search Context and type the same letter the search results in the auto-complete drop down are only those that have the "Key" of the selected item. The connection between the two DataSources is achieved by the DataContextKeyField property of the SearchBox that should be set to the data field which will be used as a context "Key" when the search operation is performed.

  • DefaultCS.aspx
<%@ Page Language="C#" AutoEventWireup="true"  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.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>
</head>
<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="RadSkinManager1" runat="server" ShowChooser="true" />
    <qsf:MessageBox ID="InformationBox1" runat="server" Icon="Info" Type="Info">
        Search products by using RadSearchBox and choose the supplier
         from the SearchContext to narrow the results in the auto-complete drop down.
    </qsf:MessageBox>

    <div class="demo-container size-narrow">
        <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" Width="500" DropDownSettings-Height="200px"
            DataSourceID="SqlDataSource1"
            DataTextField="ProductName" DataValueField="ProductID" DataContextKeyField="SupplierID">
            <SearchContext DataSourceID="SqlDataSource2" DataTextField="ContactName" DataKeyField="SupplierID">
            </SearchContext>
        </telerik:RadSearchBox>
    </div>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT [ProductId], [ProductName],[SupplierID] FROM [Products]"></asp:SqlDataSource>
    <asp:SqlDataSource ID="SqlDataSource2" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT TOP 10 [SupplierID], [ContactName] FROM [Suppliers]"></asp:SqlDataSource>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?