Tabbing through item list since Telerik Update

[Jannik]

We've updated from 2013.3 to 2014.4.

Before the update, we were able to select the item with TAB-Key, now after the update we can tab through the list, any way to get the old behaviour again?

[Jannik]

I was in a littlebit of a rush when I posted this last friday, so let me try to explain it a bit more.

The preview behaviour we had was like this:
"Our customers TAB through our UI-components, e.g. textbox, dateselection etc. Finally the user reaches the RadComboBox. He can open the selection menu and select something using the arrow keys. When he selected something using the arrow keys, he can click TAB to choose the item. Another click on TAB will let him tab to the next control."

Currently it's like this:
"Our customers TAB through our UI-components, e.g. textbox, dateselection etc. Finally the user reaches the RadComboBox. He can open the selection menu and select something using the arrow keys. When he selected something using the arrow keys, he cannot TAB to choose the item. Instead the next item in the selection list is selected. There is no way to tab out of the combobox to the next UI-component."

We really need to get the previous behaviour back.

[Kalin]

Hi Jannk,

Indeed the have improved the Tabbing behavior of the control since the Q3 2013 version. Now it behaves the same way as the native WPF ComboBox. The Tab key navigates through the items instead of going to the next control. However what I can suggest you as workaround would be to manually Focus the next UI element by hooking to the KeyDown event of the Grid inside of the drop down portion of the control. You can get that Grid in the DropDownOpened event handler and hook to the KeyDown as shown below:

private void Combo_DropDownOpened(object sender, EventArgs e)
{
    var grid = (sender as RadComboBox).ChildrenOfType<Popup>().First().Child as Grid;
    grid.RemoveHandler(UIElement.KeyDownEvent, new KeyEventHandler(OnKeyDown));
    grid.AddHandler(UIElement.KeyDownEvent, new KeyEventHandler(OnKeyDown), true);
}

And implement the following KeyDown handler:

private void OnKeyDown(object sender, KeyEventArgs e)
{
    if (e.Key == Key.Tab)
    {
        var selectedIndex = this.Combo.SelectedIndex;
        this.Combo.SelectedIndex = selectedIndex - 1;
        this.Combo.IsDropDownOpen = false;
        this.NextUIElement.Focus();
        e.Handled = true;
    }
}

Note that you would also need to cover all the border cases here (for example when click tab on the last item).

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Jannik]

Okay, we totally can understand you implemented it like this, if it is the case in the WPF Combobox.
However, we can't implement this workaround, because we do use the RadComboBox a huge amount of places

We can live with that like this, we will disable the OpenDropdownOnFocus functionality, but unfortunately we do have another problem doing that:
Our customers use the keyboard only. When tabbing into the combobox, our customers will be be able to use the arrow keys to select the item. But they can NOT open the dropdown menu with the keyboard (e.g. with ENTER or something like this)... Atleast we haven't figured out yet, how it's done.

So how to make this work? Our customers use keyboard only, so they have to be able to open it, preferably with ENTER...

[Kalin]

Hello Jannk,

I understand your concerns. We will consider adding an option that disables the Tab navigation inside of the drop down portion of the control. I logged a Feature Request for that in our Feedback portal - so you can easily vote for it and track its status on the following link:
http://feedback.telerik.com/Project/143/Feedback/Details/152619-provide-an-option-to-switch-to-the-previous-tab-navigation-behavior-of-non-editab

What I can also suggest you for now would be try making the ComboBox editable (setting its IsEditable property to True) - it will behave the needed way when Tab key is pressed. This is so as it is implemented to behave identical to the native editable WPF ComboBox (as there isn't such for Silverlight). In addition to this you can also set the IsReadOnly property to True in order to be don't allow random typing inside of input field.

As for the last question - there isn't such a built in Key opening the drop down. However you can easily implement it by your own - you can inherit from RadComboBox and override the OnKeyDown method as shown below:

public class CustomCombo: RadComboBox
{
    protected override void OnKeyDown(KeyEventArgs e)
    {
        if (e.Key == Key.Space)
        {
            this.IsDropDownOpen = true;
        }

        base.OnKeyDown(e);
    }
}

Hope this helps.

Regards,
Kalin
Telerik

 

 

[Jannik]

Thanks for the replys.

Can you open another feedback-ticket? In my opinion pressing the ENTER-Key to open the combobox selection-menu is a standard feature. I tried it out in a sample solution and pressing enter does open it on the standard silverlight combobox.

[Jannik]

Further more is it possible to style it like its not editable?

[Kalin]

Hi Jannk,

I'm sorry for misleading you actually the ComboBox can be opened by pressing the PageUp/PageDown keys. You can find more info about the Keyboard Support on the following link:
http://docs.telerik.com/devtools/silverlight/controls/radcombobox/features/keyboard-support

As for the other requirement what we can suggest you would be to use the IsEditable option in combination with the IsReadOnly property set to True - this way the users won't be able to type anything but only the content of the items in drop down.

Hope this will help you.

Regards,
Kalin
Telerik

 

 

[Kalin]

Hi Jannk,

Regarding the tabbing navigation - we managed to implement a better solution for having the previous behavior back. You would simply need to inherit RadComboBox and override the HandleKeyDown method as shown below:

public class CustomCombo: RadComboBox
{
    protected override bool HandleKeyDown(Key systemKey, int platformKeyCode)
    {
        if (systemKey == Key.Tab)
        {
            this.IsDropDownOpen = false;
            return false;
        }

        return base.HandleKeyDown(systemKey, platformKeyCode);
    }
}

Please give it a try and let me know if it works correctly for you.

Hope this helps.

Regards,
Kalin
Telerik