Question

I think my question is similar with this. However, event keypress on input text still not worked.

My Question here is how to add custom binding into input text box and trigger 'something' when pressing enter button.

Here is another sample when the target is kendo widget; and it's working.

HTML code:

<div id="app">
    <input type="text" data-bind="keyPress: onKeyPress" />
    <div id="output"></div>
</div>

Java script code:

kendo.data.binders.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 (e) {
        if (e.which == 13) {
            binding.get();
        }
    });
    },
    refresh: function () { }
});

var viewModel = kendo.observable({
    onKeyPress: function () {
        $("#output").append("<div>keyPress</div>");
    }
});
kendo.bind($("#app"), viewModel);

Jsfiddle code: http://jsfiddle.net/ikomangmahendra/4uL8Y/2/

Thanks in advance

Was it helpful?

Solution

The problem was connected with the following line:

before:
$(element.input).bind("keypress", function (e) {

after:
$(element).bind("keypress", function (e) {

I should bind the event to the element, not to element.input.

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top