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

Focusing on the First Element in RadComboBox on Expand


Product Version
RadComboBox for ASP.NET AJAX all


When expanding a RadComboBox, I want the focus to automatically move to the first item in the dropdown list.

This KB article also answers the following questions:

  • How can I automatically highlight the first item in a RadComboBox when it is expanded?
  • What client-side event allows me to set focus to the first item in a RadComboBox?
  • How to improve user experience by focusing on the first item in RadComboBox dropdown?


To focus on the first item of a RadComboBox when it is expanded, leverage the OnClientDropDownOpened event. In this event, programmatically set the focus and highlight the first item using JavaScript. Follow the steps below:

  1. Define the RadComboBox in your ASP.NET page with the OnClientDropDownOpened event, pointing to a JavaScript function.

    <telerik:RadComboBox ID="RadComboBox1" runat="server" OnClientDropDownOpened="onDropDownOpened">
            <telerik:RadComboBoxItem Text="Item 1" />
            <telerik:RadComboBoxItem Text="Item 2" />
            <telerik:RadComboBoxItem Text="Item 3" />
  2. Implement the JavaScript function referenced in the OnClientDropDownOpened event. This function should:

    • Retrieve the RadComboBox instance.
    • Check if there are any items in the RadComboBox.
    • Highlight the first item and set focus to the RadComboBox input element.
    <script type="text/javascript">
        function onDropDownOpened(sender, eventArgs) {
            var comboBox = sender;
            var items = comboBox.get_items();
            if (items.get_count() > 0) {
                var firstItem = items.getItem(0);

This code ensures that whenever the RadComboBox dropdown is expanded, the focus will be on the first item, enhancing the user experience by providing a smoother interaction.

See Also

In this article