set focus and active item to RadListBox

2 Answers 50 Views
ListBox
rhin
Top achievements
Rank 1
Iron
rhin asked on 21 May 2021, 01:39 PM | edited on 21 May 2021, 02:53 PM

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
Top achievements
Rank 1
Iron
commented on 21 May 2021, 02:55 PM

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

2 Answers, 1 is accepted

Sort by
0
Attila Antal
Telerik team
answered on 26 May 2021, 09:58 AM

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

Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.

0
rhin
Top achievements
Rank 1
Iron
answered on 26 May 2021, 10:16 AM

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
Telerik team
commented on 27 May 2021, 12:12 PM

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.
Tags
ListBox
Asked by
rhin
Top achievements
Rank 1
Iron
Answers by
Attila Antal
Telerik team
rhin
Top achievements
Rank 1
Iron
Share this question
or