Focusing on the First Element in RadComboBox on Expand
Environment
Product | Version |
---|---|
RadComboBox for ASP.NET AJAX | all |
Description
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?
Solution
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:
-
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"> <Items> <telerik:RadComboBoxItem Text="Item 1" /> <telerik:RadComboBoxItem Text="Item 2" /> <telerik:RadComboBoxItem Text="Item 3" /> </Items> </telerik:RadComboBox>
-
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); firstItem.highlight(); comboBox.get_inputDomElement().focus(); } } </script>
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.