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

    Client-Side Events

    Event log
    • Demo Configurator
    Drop Down Events
    Entry Events
    Text Events

    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>
    <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>

    Support & Learning Resources

    Find Assistance