AutoCompleteBox - Client-Side Events

Event log

Demo Configurator

Drop Down Events
Entry Events
Text Events
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

Besides the numerous client properties and methods, RadAutoCompleteBox exposes the following client events:

  • OnClientDropDownClosed
  • OnClientDropDownClosing
  • OnClientDropDownOpened
  • OnClientDropDownOpening
  • OnClientEntryAdded
  • OnClientEntryAdding
  • OnClientEntryRemoved
  • OnClientEntryRemoving
  • OnClientTextChanged
  • OnClientDropDownItemDataBound
  • OnClientRequesting
  • OnClientRequested
  • OnClientRequestFailed
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="c#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="AutoCompleteBox.Examples.Programming.ClientEvents.DefaultCS" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.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" />
    <div class="demo-container size-narrow">
        <telerik:RadAutoCompleteBox RenderMode="Lightweight" ID="RadAutoCompleteBox1" runat="server"  Width="500"
            DropDownHeight="250" DataSourceID="SqlDataSource1" DataTextField="CompanyName" EmptyMessage="Select Company Name"
            AllowCustomEntry="True">
        </telerik:RadAutoCompleteBox>
    </div>

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

    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            function onDropDownOpening(sender) {
                logEvent("Drop Down opening");
            }

            function onDropDownOpened(sender) {
                logEvent("Drop Down opened");
            }

            function onDropDownClosing(sender) {
                logEvent("Drop Down closing");
            }

            function onDropDownClosed(sender) {
                logEvent("Drop Down closed");
            }

            function onEntryAdded(sender, eventArgs) {
                logEvent("Entry added: " + eventArgs.get_entry().get_text());
            }

            function onEntryAdding(sender, eventArgs) {
                logEvent("Entry adding: " + eventArgs.get_entry().get_text());
            }

            function onEntryRemoved(sender, eventArgs) {
                logEvent("Entry removed: " + eventArgs.get_entry().get_text());
            }

            function onEntryRemoving(sender, eventArgs) {
                logEvent("Entry removing:" + eventArgs.get_entry().get_text());
            }

            function onTextChanged(sender) {
                logEvent("Text changed to: " + sender.get_text());
            }

        </script>
    </telerik:RadScriptBlock>

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

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel1">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="ConfigurationPanel1" LoadingPanelID="RadAjaxLoadingPanel1" />
                    <telerik:AjaxUpdatedControl ControlID="RadAutoCompleteBox1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <telerik:RadAjaxLoadingPanel runat="server" ID="RadAjaxLoadingPanel1" />

    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1">
        <Views>
            <qsf:View Title="Logged Events">
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" runat="server" Size="Narrow">
                    <span class="checkbox">
                        <asp:CheckBox ID="InputTypeCheckBox" Text="Text Mode" runat="server" AutoPostBack="true" />
                    </span>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" runat="server" Title="Drop Down Events" Size="Medium">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="DropDownClosed" runat="server" Text="OnClientDropDownClosed"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="DropDownClosing" runat="server" Text="OnClientDropDownClosing"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="DropDownOpened" runat="server" Text="OnClientDropDownOpened"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="DropDownOpening" runat="server" Text="OnClientDropDownOpening"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>

                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn3" runat="server" Title="Entry Events" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="EntryAdded" runat="server" Text="OnClientEntryAdded"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="EntryAdding" runat="server" Text="OnClientEntryAdding"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="EntryRemoved" runat="server" Text="OnClientEntryRemoved"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="EntryRemoving" runat="server" Text="OnClientEntryRemoving"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn ID="ConfiguratorColumn4" runat="server" Title="Text Events" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox ID="TextChanged" runat="server" Text="OnClientTextChanged"
                                    AutoPostBack="True" Checked="True" />
                            </span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>

    </form>
</body>
</html>

Find Assistance

Help Us Improve

Was this example helpful?