Unable to tab into ListBox Control

[Lindsay Miller]

We are using the ListBox control on a common page in our application.  We are using the Move Up, Move Down and Delete features.  This control is used in 508 and non-508 mode.  We are unable to tab into the ListBox no matter what mode we are in.  Is tabbing into this control supported?  Is there a different way to get to the rows of the box without using the mouse?

<telerik:RadListBox ID="rlbFilters" runat="server" AllowDelete="True"
    AllowReorder="True" Height="100px" Width="450px" OnDeleted="OnCriteriaRemoval"
    OnReordered="OnCriteriaReorderd" OnClientSelectedIndexChanged="rlbFilters_SelectedIndexChanged"
    AutoPostBackOnReorder="true" AutoPostBackOnDelete="true" Visible="false" >
    <ButtonSettings />
</telerik:RadListBox>

Thank you,
Lindsay

[Thad]

Hey Lindsay,

I think I saw somewhere that you had to set a TabIndex on the RadListBox for it to be tabbed to, but am not sure.

If that doesn't work you could always capture the tab key on the previous control's keyDown event and use JavaScript to set focus to the RadListBox.  That requires a bit of fun voodoo, so I pasted the relevant code below.

var radListBox = $find('<% = rlbTest.ClientID %>');
$telerik.$(radListBox._getGroupElement()).focus();

Good luck!
Thad

PS:  I'm on vacation for the next week so if you respond with further questions don't be offended that I don't reply back.  :)

[Dimitar Terziev]

Hi Lindsay,

As Thad has suggested you should use TabIndex property of the ListBox.
You should set a particular index in order to be able to use the keyboard support for the RadListBox.
Try setting a suitable TabIndex and then you should be able to navigate through the items of the listbox with the up and down arrows.

Greetings,
Dimitar Terziev
the Telerik team

[Mike]

If you don't have the time or the desire to set tabindex on all of your page controls just to get listbox keyboard support, you can call the function below from a RadListBox OnClientLoad script function and it will default the tabindex for the group element to 0. This will make the listbox keyboard support work in most modern browsers. This is not likely to work in some browsers, so if you are a purist intent on everything working everywhere then you need to do as Telerik advises and set a valid tabindex on each RadListBox.

Note: this function uses jquery, so you will either need to include jquery or reference it with the appropriate $ variable for your environment if you don't use the default.

function setListBoxDefaultTabIndex(listbox) {
    var $groupElement = $(listbox.get_element()).find('.rlbGroup');
    if ($groupElement.attr('tabindex') === undefined) {
        $groupElement.attr("tabindex", "0");
    }
}