Kendo MVVM and binding or extending custom events

Question

I have a ComboBox in my page and I want to bind keypress event to my Kendo ComboBox when the cliend writes down any letter.

As I understand kendo doesn't have any keypress event on ComboBox.

I've found that kendo has something like this to bind values and functions:

kendo.data.binders.slide = kendo.data.Binder.extend({
        refresh: function () {
            var value = this.bindings["slide"].get();

            if (value) {
                $(this.element).slideDown();
            } else {
                $(this.element).slideUp();
            }
        }
    });

Source: Click Here

But the problem is I can't workaround that and make it to trigger keypress event on the InputBox in the KendoComboBox control.

Remember that I'm using MVVM and I don't want to use somthing like $('k-input').keypress(...); I want to actually add something in my kendo framework by manipulating the extend method that kendo provided for us.

Thank you in advance.

Filly

Answer 1

This one was more complicated than I thought it would be, but you can handle this by making a custom MVVM binder to attach to the keyPress event of the input element, like this:

kendo.data.binders.widget.keyPress = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
        var binding = this.bindings.keyPress;
        $(element.input).bind("keypress", function(){binding.get();});
    },
    refresh: function () {}
});

You would bind that to a function on the view model.

<input data-role="combobox"
    data-text-field="text"
    data-value-field="value"
    data-bind="keyPress: onKeyPress, source: data"></input>


var viewModel = kendo.observable({
    data: [
        {text: "One", value: 1},
        {text: "Two", value: 2}
    ],
    onKeyPress: function () {
        $("#output").append("<div>keyPress</div>");
    }
});

Here is a working jsFiddle.

Doscher

Respect! Thanks man... although I tried something like that I couldn't finish it. But you know? They say the one who finished the job deserves to get all the credit. And I must say I really appreciate all the time you spent on the matter. Thanks a lot! – Filly

@Sabox glad I could help. It was a learning experience for me too. I didn't realize that if you are making an MVVM binder for non-widgets you assign it to kendo.data.binders.myBindersName but for it to work with widgets, like the ComboBox, you instead have to assign your binder to kendo.data.binders.widget.myBindersName That one little detail took a while to figure out! – Doscher

@Doscher this is awesome but I can't get it working with the autocomplete. Any ideas? – Anthill

I have posted it as a question here: #21509050 as I found another approach that looked promising ... to start with. – Anthill

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 DropDownList widget that generally doesn't support the keypress events.

Newmodel