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

    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

      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.

      The OnClientItemSelected client-side event fires when the user selects an item from the search context dropdown. Its args param provides the following methods:

      • (bool) get_isDefaultItem() - returns true if the selected item is the Default item (The search box has a default item called "All" which does not have a value)
      • (Telerik.Web.UI.SearchContextItem) get_item() - returns the selected SearchContextItem object
      • (string) get_text() - returns the selected SearchContextItem's Text
      • (int) get_key() - returns the selected SearchContextItem's Key (otherwise called value)

      • 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>
      <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" OnClientItemSelected="OnClientItemSelected">
                  </SearchContext>
              </telerik:RadSearchBox>
              <ul class="itemslist"></ul>
              <script>
                  function OnClientItemSelected(sender, args) {
                      var $content = $('<span class="item">Selected user name: <strong>' + args.get_text() + '</strong>, Supplier ID Key: <strong>' + args.get_key() + '</strong>, Is Default: <strong>' + args.get_isDefaultItem() + '</strong></span>');
       
                      var $listEl = $('<li></li>').append($content);
                      $('.itemslist').append($listEl);
                  }
              </script>
          </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