ComboBox

Controls

Rate this demo

Thank you for your post!
Submit a support ticket
If you have an active license or trial, you have access to dedicated support from Telerik’s developers. Response time is 24h for active licenses and 72h for trials, Mon-Fri.
Post in the forums
If you don’t have access to support or would like to help other people by sharing your problem, reach out to our active community in the forums.

ComboBox - Client-Side Events

Example Configuration
Drop down events
Selected index events
Item events
Interaction events

Clear log Event log:

Client-side events exposed by RadComboBox:

  • OnClientSelectedIndexChanging
  • OnClientSelectedIndexChanged
  • OnClientDropDownClosing
  • OnClientDropDownOpening
  • OnClientItemsRequested
  • OnClientItemsRequesting
  • OnClientItemBlur
  • OnClientFocus
  • OnClientKeyPressing
  • OnClientItemChecking
  • OnClientItemChecked
  • OnClientCallBackError
C# VB
Show code in new window Demo isolation steps
<%@ Page AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="Telerik.ComboboxExamplesCS.ClientEvents.DefaultCS"Language="c#"  %>
<%@ Register TagPrefix="telerik" Namespace="Telerik.Web.UI" Assembly="Telerik.Web.UI" %>
<%@ Register TagPrefix="qsf" Namespace="Telerik.QuickStart" %>

<!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>
    <title>ASP.NET ComboBox Demo - Client-Side Events</title>
</head>

<body>
    <form id="form1" runat="server">
    <telerik:RadScriptManager runat="server" ID="RadScriptManager1" />
    <telerik:RadSkinManager ID="QsfSkinManager" runat="server" ShowChooser="true" />
    <telerik:RadFormDecorator ID="QsfFromDecorator" runat="server" DecoratedControls="All" EnableRoundedCorners="false" />

     <telerik:RadAjaxPanel ID="RadAjaxPanel1" runat="server">

          <div class="qsf-demo-canvas qsf-demo-canvas-vertical">
               <telerik:RadComboBox ID="RadComboBox1" runat="server" Height="170" Width="204"
                    ShowMoreResultsBox="True" EnableLoadOnDemand="True" OnItemsRequested="RadComboBox1_ItemsRequested">
               </telerik:RadComboBox>
          </div>

          <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel1"
               Expanded="true" Orientation="Vertical">
               <ul>
                    <li>
                         <asp:CheckBox runat="server" ID="SimpleRenderingMode" Text="Simple Rendering Mode" 
                              AutoPostBack="true" />
                    </li>
               </ul>
               <h6>Drop down events</h6>
               <ul>
                    <li>
                         <asp:CheckBox runat="server" ID="DropDownOpening" Text="OnClientDropDownOpening"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="DropDownOpened" Text="OnClientDropDownOpened"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="DropDownClosing" Text="OnClientDropDownClosing"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="DropDownClosed" Text="OnClientDropDownClosed"
                              AutoPostBack="True" Checked="True" />
                    </li>
               </ul>
               <h6>Selected index events</h6>
               <ul>
                    <li>
                         <asp:CheckBox runat="server" ID="SelectedIndexChanging" Text="OnClientSelectedIndexChanging"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="SelectedIndexChanged" Text="OnClientSelectedIndexChanged"
                              AutoPostBack="True" Checked="True" />
                    </li>
               </ul>
               <h6>Item events</h6>
               <ul>
                    <li>
                         <asp:CheckBox runat="server" ID="ItemsRequesting" Text="OnClientItemsRequesting"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="ItemsRequested" Text="OnClientItemsRequested"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="ItemChecking" Text="OnClientItemChecking"
                              AutoPostBack="True" Checked="false" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="ItemChecked" Text="OnClientItemChecked"
                              AutoPostBack="True" Checked="false" />
                    </li>
               </ul>
               <h6>Interaction events</h6>
               <ul>
                    <li>
                         <asp:CheckBox runat="server" ID="KeyPressing" Text="OnClientKeyPressing"
                              AutoPostBack="True" Checked="True" />
                    </li>
                    <li>
                         <asp:CheckBox runat="server" ID="TextChange" Text="OnClientTextChange"
                              AutoPostBack="True" Checked="True" />
                    </li>
               </ul>
          </qsf:ConfiguratorPanel>

     </telerik:RadAjaxPanel>

     <hr class="qsf-clear-float" />

     <qsf:EventLogConsole runat="server" AllowClear="true" Height="200" />

     <telerik:RadScriptBlock 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 onSelectedIndexChanging(sender, eventArgs) {
                    var selectedItem = sender.get_selectedItem();
                    var previouslySelectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();

                    logEvent("Index changing from Item '" + previouslySelectedItemText + "'");
               }

               function onSelectedIndexChanged(sender, eventArgs) {
                    var selectedItem = eventArgs.get_item();
                    var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();

                    logEvent("Index changed to Item '" + selectedItemText + "'");
               }

               function onItemsRequesting(sender, eventArgs) {
                    logEvent("Requesting Items with text '" + eventArgs.get_text() + "'");
               }

               function onItemsRequested(sender, eventArgs) {
                    logEvent("Requested items with text '" + eventArgs.get_text() + "'");
               }

               function onKeyPressing(sender, eventArgs) {
                    logEvent("Pressing key code: " + eventArgs.get_domEvent().keyCode);
               }

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

               function onItemChecking(sender, args) {
                    var checked = args.get_item().get_checked();
                    if (!checked)
                         logEvent("Item '" + args.get_item().get_text() + "' checking");
                    else
                         logEvent("Item '" + args.get_item().get_text() + "' unchecking");
               }

               function onItemChecked(sender, args) {
                    var checked = args.get_item().get_checked();
                    if (checked)
                         logEvent("Item '" + args.get_item().get_text() + "' checked");
                    else
                         logEvent("Item '" + args.get_item().get_text() + "' unchecked");
               }
          </script>
     </telerik:RadScriptBlock>

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