keypress event and NumericTextBox / datepicker

[Justin]

Based on a previous forum post, I now have custom keypress bindings working via typescript for text-boxes and text-areas. I would very much like to extend numerictextbox and datepicker/datetimepicker to support this as well, but the same bindings do not seem to work for those controls. I believe this has to do with the way the actual input gets wrapped for those controls.

I'm currently doing this:

 

module kendo.data.binders.widget {
    export class keypress extends kendo.data.Binder {
        init(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        }

        refresh() {
            var that = this,
                value = that.bindings["keypress"].get(); //get the value from the View-Model
            that.element.custom(value);
        }
    }
}

 

... and then in the cshtml file, I'm trying to bind the numerictextbox like so:

<div>
  <input type="text"
    name="SortOrder"
    data-role="numerictextbox"
    data-bind="value:assetType.SortOrder, events: {change: detailChange, keypress: detailChange}"
    data-format="n0"
    style="width: 100%;" />
</div>

 

... but the keypress event does not fire when I do this. Is there a mechanism I can use to get the keypress event to fire/respect MVVM bindings for non-textbox controls?

Thanks in advance!

[Alexander Popov]

Hello Justin,

Subscribing to native events is generally not supported by the widget binders. As a workaround you can try creating a custom binder that does just that. For example: 

<input data-role="numerictextbox" id="numeric" data-bind="value: value, keypress: onKeyPress, events: {keypress: onKeyPress}" />

    /// <reference path="jquery.d.ts" />
    /// <reference path="kendo.all.d.ts" />

    module kendo.data.binders.widget {

        export class keypress extends kendo.data.Binder {
            constructor(widget, bindings, options) {
                kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
                this.handler = $(widget.element).bind("keypress", this.bindings.events.keypress.source[this.bindings.events.keypress.path]);
            }
            refresh() {}

        }

    }


    class NumericOptions extends kendo.data.ObservableObject {
        value = 5;
        onKeyPress(e) {
            console.log("onKeyPress", e);
        }

        constructor() {
            super();
            super.init(this);
        }
    }

    $(function () {
        var viewModel = new NumericOptions();
        kendo.bind(document.body, viewModel);
    });

Regards,
Alexander Popov
Telerik by Progress