set focus and active item to RadListBox

[rhin]

Hi

So I have RadListBox implemented into my page and I need to add some additional on keyDown functionality

I attached on OnClientLoad a keydown event to the .rlbGroup class - it is getting into the function and doing the stuff that I am telling it to however there are some issues:

1. I am unable to remove the .rlbActive class from previously selected item

so RadListBox.get_items().get_item(0).removeClass('.rlbActive') is not an option 

I tried using _activateItem() since I believe it is deactivating the current rlbActive in itself without success also. The DOM does not give me idea how to properly get rid of the active class at all.

Some assistance would be appreciated. It is an option to disable the rlbActive class completely - How can I do that without risking creating a bug in the control?

Self answered: 2. on clicking on the control I am unable to fire my the keydown function (I can fire it if I move focus to the control via TAB key)

What is the proper way to set focus on the RadListBox.get_items()?

What I have tried so far is using event 'focusing' in OnClientLoad attaching to .rlbGroup 

 

Any idea or even general information is welcome

Thanks

 

[rhin]

For my second question turns out it is enough to put tabindex="1" on the control. Couldn`t be easier eh....

[Attila Antal]

Hello rhin,

Yes, you could set the tab index to 1 if you want this control to get focus when Tabbing through the controls of the page. You can also enable the Keyboardsupport where you will be able to set a combination of two keys to focus the Listbox specifically. See Keyboard Support

If you want to fire the keypress or keydown events at that moment, you can attach it yourself.

Here is an example:

<telerik:RadListBox runat="server" ID="RadListBox1" TabIndex="1">
    <KeyboardNavigationSettings CommandKey="Alt" FocusKey="M" />
    <Items>
        <telerik:RadListBoxItem Text="Item 1" />
        <telerik:RadListBoxItem Text="Item 2" />
        <telerik:RadListBoxItem Text="Item 3" />
        <telerik:RadListBoxItem Text="Item 4" />
    </Items>
</telerik:RadListBox>

<script>

    $('body').on('keydown', '.RadListBox', function (e) {
        alert('Keydown fired on RadListBox');
    })

</script>

 

Regards,
Attila Antal
Progress Telerik

[rhin]

The keyboard support does not fit my requirements - the focus key is the problem and I need a mixed mode of both first letter and filter by string. I did find a way to deal with the active item issue and implemented the change. Way to complicated to explain but basically I used the input checkbox in my control to help with the focus issue - putting tabs to all items bought too many issues.

I am left with one bug - when I first focus with tab into the control the target is control itself. I have made it that my functionality will kick in only after selecting one of the items. Is there a easy way to make it to focus directly on the items? Or e.g on SelectedItemChanging to check the pressed key? and make a set_cancel(true) if item is not focused on? btw getDOMEvent always returns null.

[Attila Antal]

I am afraid not. The focus happens on the entire ListBox element. The same would happen with the asp:ListBox. The Control itself is focusable, not its Items.