DropDownList - Client-Side API

Select Category

Event log

Demo Configurator

Dropdown events
Item events
Selected index event
Isolate this demo as a stand-alone application
  • About this demo
  • C#
  • VB

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

  • OnClientItemSelecting
  • OnClientItemSelected
  • OnClientSelectedIndexChanged
  • OnClientItemDataBound
  • OnClientDropDownOpening
  • OnClientDropDownOpened
  • OnClientDropDownClosing
  • OnClientDropDownClosed
  • DefaultCS.aspx
  • DefaultCS.aspx.cs
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="DefaultCS.aspx.cs" Inherits="DropDownList.Examples.Programming.ClientSide.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" />

    <telerik:RadODataDataSource runat="server" ID="RadODataDataSource1">
        <Schema>
            <telerik:DataModel ModelID="Category" Set="Categories">
                <telerik:DataModelField FieldName="CategoryName" />
            </telerik:DataModel>
        </Schema>
    </telerik:RadODataDataSource>

    <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server">
        <AjaxSettings>
            <telerik:AjaxSetting AjaxControlID="ConfigurationPanel">
                <UpdatedControls>
                    <telerik:AjaxUpdatedControl ControlID="RadDropDownList1" />
                </UpdatedControls>
            </telerik:AjaxSetting>
        </AjaxSettings>
    </telerik:RadAjaxManager>

    <div class="demo-container size-thin">
        <telerik:RadDropDownList RenderMode="Lightweight" ID="RadDropDownList1" runat="server"  Width="300px" DefaultMessage="Select Category"
            ODataDataSourceID="RadODataDataSource1" DataModelID="Category" DataTextField="CategoryName">
        </telerik:RadDropDownList>
    </div>

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


    <telerik:RadScriptBlock ID="RadScriptBlock1" runat="server">
        <script type="text/javascript">
            /*<![CDATA[*/
            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 onSelectedIndexChanged(sender, args) {
                var selectedItem = sender.get_selectedItem();
                var selectedItemText = selectedItem != null ? selectedItem.get_text() : sender.get_text();

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

            function onItemSelecting(sender, args) {
                logEvent("ItemSelecting: " + args.get_item().get_text());
            }

            function onItemSelected(sender, args) {
                logEvent("ItemSelected: " + args.get_item().get_text());
            }

            function onItemDataBound(sender, args) {
                logEvent("Item databound. Item text: " + args.get_item().get_text());
            }
            /*]]>*/
        </script>
    </telerik:RadScriptBlock>


    <qsf:ConfiguratorPanel runat="server" ID="ConfigurationPanel">
        <Views>
            <qsf:View>
                <qsf:ConfiguratorColumn Title="Dropdown events" runat="server" Size="Narrow">
                    <ul class="fb-group">
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="DropDownOpening" Text="OnClientDropDownOpening"
                                    AutoPostBack="True" Checked="True" /></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="DropDownOpened" Text="OnClientDropDownOpened"
                                    AutoPostBack="True" Checked="True" /></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="DropDownClosing" Text="OnClientDropDownClosing"
                                    AutoPostBack="True" Checked="True" /></span>
                        </li>
                        <li>
                            <span class="checkbox">
                                <asp:CheckBox runat="server" ID="DropDownClosed" Text="OnClientDropDownClosed"
                                    AutoPostBack="True" Checked="True" /></span>
                        </li>
                    </ul>
                </qsf:ConfiguratorColumn>
                <qsf:ConfiguratorColumn runat="server" Size="Medium">
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn1" Title="Item events" runat="server">
                        <ul class="fb-group">
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox runat="server" ID="ItemSelecting" Text="OnClientItemSelecting"
                                        AutoPostBack="True" Checked="True" /></span>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox runat="server" ID="ItemSelected" Text="OnClientItemSelected"
                                        AutoPostBack="True" Checked="True" /></span>
                            </li>
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox runat="server" ID="ItemDataBound" Text="OnClientItemDataBound"
                                        AutoPostBack="True" Checked="True" /></span>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                    <qsf:ConfiguratorColumn ID="ConfiguratorColumn2" Title="Selected index event" runat="server">
                        <ul class="fb-group">
                            <li>
                                <span class="checkbox">
                                    <asp:CheckBox runat="server" ID="SelectedIndexChanged" Text="OnClientSelectedIndexChanged"
                                        AutoPostBack="True" Checked="True" /></span>
                            </li>
                        </ul>
                    </qsf:ConfiguratorColumn>
                </qsf:ConfiguratorColumn>

            </qsf:View>
        </Views>
    </qsf:ConfiguratorPanel>
    </form>
</body>
</html>

Support & Learning Resources

Find Assistance

Help Us Improve

Was this example helpful?