Keyboard navigation for RadListBox with icons

Question

I am using RadListBox to show a list of items. Each item has an icon. The requirement is jumping on the item when a the first letter of that item is pressed.

For example: It should focus on "Dock" when letter "D" is pressed

Is there any built-in feature to accomplish this>

Answer 1

Seems this a Telerik bug, but i made a project, test situation and it's working.

download sample project here.

this project tested on google chrome Version 60.0.3112.113 (Official Build) (64-bit)

After run project press Alt+s or Alt+o or Alt+c

Remember change AccessKey property to change shortcut key:

RadListBox1.Items[0].AccessKey = "s";

I should say that this NOT a perfect solution.

RadListBox is a powerful ASP.NET AJAX control to display a list of items. It allows for multiple selection of items, reorder and transfer between two listboxes. Drag and drop is fully supported as well.

Answer 2

This functionality is built into the RadListBox right out of the box.

You must have the list box focused and then type a key to select the item with the first letter matching the key that was pressed. In order to focus on the list box you can either: click with the mouse, tab to it, set focus in JS, or use the KeyboardNavigationSettings.CommandKey and KeyboardNavigationSettings.FocusKey to help aid with keyboard navigation.

Example:

 RadListBox1 = new RadListBox()
 RadListBox1.KeyboardNavigationSettings.CommandKey = KeyboardNavigationModifier.Alt;
 RadListBox1.KeyboardNavigationSettings.FocusKey = KeyboardNavigationKey.L;

You can also use EnableMarkMatches to highlight more than one match if necessary and for typing more than one letter for selecting.

Reference: Telerik RadListBox Keyboard Navigation Demo << This has all the sample code you should need.