[Solved] RadCombobox Keyboard support?

[John Fetherolf]

I have a RadCombobox that basically has a static list of usually 8-9 coded prices something like this:

F - $1.50 ea.
E - $2.50 ea.
D - $3.50 ea.
etc...

 
I want the user to be able to be able to hit 'F', 'E', 'D' to select the corresponding price in the dropdown list, but I can find no easy way to do it without directly handling keyboard input in the OnClientKeyPressing client side event. 

I tried ...

protected void selTabCode_ItemDataBound(object sender, RadComboBoxItemEventArgs e) {
    TabCodePrice tcp = null;

    if(e.Item == null || (tcp = e.Item.DataItem as TabCodePrice) == null)
        return;

    e.Item.AccessKey = tcp.TabCode;
}

... but to no avail.  Is there any easier way to do this that I am missing?

Thanks,
Kevin

[Veselin Vasilev]

Hi John Fetherolf,

I suggest that you set the MarkFirstMatch property of the ComboBox to True.

This is extracted from the help:

RadComboBox supports client-side autocomplete - end users can autocomplete combobox items. As soon as the user types some text in the input area, the text is automatically completed to the first matching item. To enable the autocomplete mechanism of the combobox, set the MarkFirstMatch property to True.

I hope this helps.

Sincerely yours,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John Fetherolf]

Veskoni,

Nope this doesn't help me much.  I don't have autocomplete turned on for this combobox.  I have a static list of items, so the textbox portion of the control should not even be enabled..  The items are preloaded when the page loads, so basically there are only 8-9 values that the user will ever type in the combobox and having them have to highlight the existing text to type in a new value is not acceptable in this case.  What I was looking for was more standard windows combobox or standard HTML <select> tag behavior where you just start typing characters when the control has focus, and it auto-selects the first matching item.  Then pressing subsequent letters narrows the search. 

For instance in a list of US states in a <select> tag you can type 'O' and it will usually jump you down to 'Ohio' and then quickly pressing a 'k' will further jump you to 'Oklahoma'.  If no key is pressed for a certain number of seconds then pressing 'O' again will reset the buffer and jump you back to 'Ohio' without having to clear the original 'O' or 'k' the user typed.  Hopefully this makes sense.

Anyway I was able to simulate the behavior in a keyboard handler as follows:

//  Keyboard handler for the tab codes dropdown.  Allows the user to simply
//  type the tab code to select the item in the list.
function OnTabCodeKeyDown(sender, eventArgs) {
    if(eventArgs.altKey == true || eventArgs.ctrlKey == true)
        return;

    //  Handle A - H and X, for now
    if((eventArgs.keyCode >= 65 && eventArgs.keyCode <= 72) || eventArgs.keyCode == 88) {
        var tabCode = String.fromCharCode(eventArgs.keyCode).toUpperCase();
        var cb = sender;
        var item = cb.findItemByValue(tabCode);

        if (item != null) {
            item.highlight();
            item.select();
        }
    }
}

This works for single key strokes, but would probably be more complicated if not impossible for my previous states example.  In my opinion this prevents RadCombobox from being a straight replacement for an HTML <select> tag.

Also with this I could find no way to get the control to ensure that the item that I do the item.select(); on above is actually visible in the scrolling area of the dropdown.  Is there a way to force an item to be visible when selecting it client-side like this?

Thanks,
Kevin

[Veselin Vasilev]

Hi John Fetherolf,

Please consider the following sample code:

<script type="text/javascript">
function onFocus(sender)
{
    sender.showDropDown();
}
</script>
<telerik:RadComboBox ID="RadComboBox1"
ShowDropDownOnTextboxClick="true"
OnClientFocus="onFocus"
runat="server"
MarkFirstMatch="true"
RadComboBoxImagePosition="Right">
    <Items>
        <telerik:RadComboBoxItem runat="server" Text="F - $1.50 ea." />
        <telerik:RadComboBoxItem runat="server" Text="E - $2.50 ea." />
        <telerik:RadComboBoxItem runat="server" Text="D - $3.50 ea." />
    </Items>
    <CollapseAnimation Duration="200" Type="OutQuint" />
    <ExpandAnimation Type="OutQuart" />
</telerik:RadComboBox>

It meets most of your requirements - static list of items, when the combo gets the focus - the dropdown is opened and when the user starts to type - it will mark the first matched item. Also opening the dropdown on focus will ensure that the selected item will be in the visible dropdown area.


All the best,
Veskoni
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

[John Fetherolf]

Veskoni,

This is very close but still not quite right.  When I type "F" it higlights the rest of item F, but the user has to hit backspace to clear the text to later type "E".  This is not very intuitive when compared to the behavior of a <select> tag.  I think I am just going to have to stick with the keyboard handler for now as it works the way I want it to.  The Focus() function does work to ensure the item is visible so that helps a ton ;-) Thanks for the responses and the help.

Kevin