Trying to prevent arrow key input for kendoComboBox

Question

I have a kendoComboBox set up and I am trying to prevent the arrow keys from sending input.

In my example below if I remove the check for keyCode 38 and 40 which are the up and down arrows it will block all alpha numerical input but I but the arrow keys will still change the selection of the kendoComboBox.

Any suggestions or ideas?

JS Bin

$(document).ready(function() {

$("#products").kendoComboBox({
    placeholder: "Select product",
    dataTextField: "ProductName",
    dataValueField: "ProductID",
    filter: "contains",
    autoBind: false,
    minLength: 1,
    dataSource: {
        type: "odata",
        serverFiltering: true,
        transport: {
            read: {
                url: "http://demos.kendoui.com/service/Northwind.svc/Products"
            }
        }
    }
});

// Stop up/down arrow input
$('#products').closest('.k-widget').keydown(function(e){

    console.log(e.keyCode);

    // Up/down arrow
    if(e.keyCode == 38 || e.keyCode == 40)
        e.preventDefault();
});

});

Answer 1

What you tried won't work because it doesn't affect the event handler registered by the combobox. You can simply replace that handler with one that doesn't navigate using the arrow keys (although, as a user, I feel compelled to ask why you're doing this):

kendo.ui.ComboBox.fn._keydown = function(e) {
    var that = this,
        key = e.keyCode;

    that._last = key;

    clearTimeout(that._typing);

    if (key !== kendo.keys.TAB &&
        key !== kendo.keys.DOWN &&
        key !== kendo.keys.UP) {
        that._search();
    }
};

(add this code somewhere before you first create your combobox)

Demo here

Answer 2

You can capture the keydown event of all ComboBox controls using the following code:

kendo.ui.ComboBox.fn._keydown = function(e) {
    if (e.which == 13) {
        alert("key pressed!");
    }
};

This also works with the Kendo DropDownList - a widget that generally doesn't support the keypress events.

Answer 3

You have probably already solved your problem, however, I was having the same issue with preventing the value change on Kendo NumericTextBox. I found an article that may help you: http://www.telerik.com/forums/is-there-an-easy-way-to-disable-the-spinners

What ended up working for me was to unbind the keydown event on that input.

It is important to note that you need to unbind the keydown event for the arrows AFTER the widget has been initialized...

My code was pretty simple after:

...InitializeWidgets();
   InitlializeEvents();

   $(numberQuestions).unbind("keydown");

All you need to do is choose the selector, and unbind that keydown event and it should work for you!