SearchBox - Property Explorer


Demo Configurator

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

RadSearchBox supports binding to various data source controls. It is populated with data by either using server-side binding, or client-side binding. The items are loaded on demand, and request for items is initiated by the text typed into the input area, by the user.

  • DefaultCS.aspx
  • DefaultCS.aspx.cs
  • styles.css
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox_Examples_PropertyExplorer_DefaultCS"  %>

<%@ 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>
    <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:RadScriptBlock ID="ScriptBlock1" runat="server">
        <script type="text/javascript">
            function buttonCommand(sender, args) {
                var radToolTip = $find("<%= RadToolTip1.ClientID %>"),
                    contentElement = radToolTip.get_contentElement(),
                    parentElement = contentElement ? contentElement : radToolTip.get_element(),
                    theCommandButton,
                    textBox;

                if (args.get_commandName() == "Globe") {
                    theCommandButton = sender.get_buttons().getButton(0);
                }
                else {
                    theCommandButton = sender.get_buttons().getButton(1);
                }

                radToolTip.set_targetControl(theCommandButton.get_element());

                textBox = $telerik.findControl(parentElement, "TextBox1");
                textBox.set_value(args.get_commandArgument());

                setTimeout(function () {
                    radToolTip.show();
                }, 20);
            }
        </script>
        
    </telerik:RadScriptBlock>
    <telerik:RadAjaxPanel ID="AjaxPanel1" runat="server">

        <div class="demo-container size-thin">

            <telerik:RadSearchBox RenderMode="Lightweight" runat="server" ID="RadSearchBox1"
                DataSourceID="SqlDataSource1"
                DataKeyNames="UnitPrice"
                DataValueField="ProductId"
                DataTextField="ProductName"
                EnableAutoComplete="true"
                Width="310"
                OnSearch="RadSearchBox1_Search"
                OnClientButtonCommand="buttonCommand">
                <Buttons>
                    <telerik:SearchBoxButton ImageUrl="../images/icon_globe.png" CommandName="Globe"
                        CommandArgument="globe" Position="Left" AlternateText="globe" />
                    <telerik:SearchBoxButton ImageUrl="../images/icon_favourites.png" CommandName="Favorites"
                        CommandArgument="favorites" Position="Right" AlternateText="favorites" />
                </Buttons>
                <DropDownSettings Width="300" Height="300px" />
            </telerik:RadSearchBox>
              <br />
           <asp:Literal ID="result" runat="server" Visible="false" />
        </div>
        <telerik:RadToolTip RenderMode="Lightweight" runat="server" ID="RadToolTip1" HideEvent="ManualClose"
            ShowEvent="FromCode" Width="300px" RelativeTo="Element" Position="BottomRight">
            <asp:Label ID="Label1" CssClass="theLabelClass" Text="Show tooltip for button:" runat="server"></asp:Label>
            <telerik:RadTextBox RenderMode="Lightweight" ID="TextBox1" runat="server"></telerik:RadTextBox>
        </telerik:RadToolTip>

       
    </telerik:RadAjaxPanel>
    <asp:SqlDataSource ID="SqlDataSource1" runat="server"
        ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>



    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBoxDefaultButton" AutoPostBack="true" Checked="true" Text="Default button" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="CheckBoxEnableAutoComplete" AutoPostBack="true" Checked="true" Text="Enable AutoComplete" />
                            </span>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="FilterComboBox" AutoPostBack="true" Label="Filter" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Text="Contains" Value="Contains" />
                                    <telerik:DropDownListItem Text="StartsWith" Value="StartsWith" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="FilterLength" AutoPostBack="true" Label="MinFilterLength" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Text="1" Value="1" />
                                    <telerik:DropDownListItem Text="2" Value="2" />
                                    <telerik:DropDownListItem Text="4" Value="4" />
                                </Items>
                            </qsf:DropDownList>
                        </li>
                        <li>
                            <qsf:DropDownList runat="Server" ID="MaxResultsCount" AutoPostBack="true" Label="MaxResultsCount" Size="Medium">
                                <Items>
                                    <telerik:DropDownListItem Text="10" Value="10" />
                                    <telerik:DropDownListItem Text="20" Value="20" />
                                </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?