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

Client-side Events

Event log
  • Demo Configurator
  • Search Event

  • Data Request Event

  • Button Command Event

RadSearchBox exposes the following client events:

  • OnClientSearch
  • OnClientButtonCommand
  • OnClientDataRequesting
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="SearchBox.Examples.Programming.ClientEvents.DefaultCS" %>

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

    <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">
        <div class="demo-container size-thin">
            <telerik:RadSearchBox RenderMode="Lightweight" ID="RadSearchBox1" runat="server" DataSourceID="SqlDataSource1"
                DataTextField="ProductName" Width="300" EmptyMessage="Search for product">
                <DropDownSettings Height="250" Width="300" />
                <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 Height="400" Width="300" />
            </telerik:RadSearchBox>

        </div>

        <qsf:EventLogConsole ID="EventLogConsole1" runat="server" AllowClear="true"></qsf:EventLogConsole>
    </telerik:RadAjaxPanel>

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function onSearch(sender, args) {

                logEvent("Client Search fired for" + " " + "Text: " + args.get_text());
            }

            function onDataRequesting(sender, args) {
                logEvent("Data Requesting fired for" + " " + "Text: " + args.get_text());
            }

            function onButtonCommand(sender, args) {
                logEvent("Button Command fired for" + " " + "CommandName: " + args.get_commandName() + ";" +
                    "CommandArgument: " + args.get_commandArgument());
            }
        </script>
    </telerik:RadScriptBlock>

    <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"
        ProviderName="System.Data.SqlClient" SelectCommand="SELECT * FROM [Products]"></asp:SqlDataSource>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View Title="Logged Events">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <h4>Search Event</h4>
                            <span class="checkbox">
                                <asp:CheckBox ID="Search" runat="server" Text="OnClientSearch"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <h4>Data Request Event</h4>
                            <span class="checkbox">
                                <asp:CheckBox ID="DataRequesting" runat="server" Text="OnClientDataRequesting"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <h4>Button Command Event</h4>
                            <span class="checkbox">
                                <asp:CheckBox ID="ButtonCommand" runat="server" Text="OnClientButtonCommand"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance