10

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>

enter image description here

Ned
  • 1,055
  • 9
  • 34
  • 58

2 Answers2

1

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.

chambo
  • 491
  • 3
  • 8
  • It doesn't work if there are icons in the listbox. Otherwise, it's very easy and straightforward – Ned Sep 17 '17 at 01:47
  • 1
    damn Telerik always offering great features that seemingly hate to play nicely with each other!! A couple other ideas that you could try: 1) skip the Telerik built-in icon functionality and try and inject them on the client-side. OR 2) write your own selection functionality [attach a keypress event when focus is set to the list box, loop the options in the list box and select the one that matches the key you pressed] 3) post in the Telerik forum and hope they have a good answer for you. If you do #3 post a link back here, I'd like to see the solution their forum comes up with. – chambo Sep 20 '17 at 20:49
0

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

download sample project here.

screenshot

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.

Farhad
  • 4,119
  • 8
  • 43
  • 66
  • It works in Chrome (not in IE). In order to use it in Chrome, Alt key should also be pressed as you mentioned. Not an ideal solution for end users but nothing much to do with this Telerik control. I will accept it as answer. Thanks! – Ned Dec 24 '17 at 19:29