keypress event and NumericTextBox / datepicker

2 posts, 0 answers
  1. Justin
    Justin avatar
    4 posts
    Member since:
    Feb 2016

    Posted 20 Jan 2017 Link to this post

    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 {
        export class keypress extends {
            init(widget, bindings, options) {
                //call the base constructor
      , widget.element[0], bindings, options);
            refresh() {
                var that = this,
                    value = that.bindings["keypress"].get(); //get the value from the View-Model


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

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


    ... 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!

  2. Alexander Popov
    Alexander Popov avatar
    1445 posts

    Posted 24 Jan 2017 Link to this post

    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 {
            export class keypress extends {
                constructor(widget, bindings, options) {
          , widget.element[0], bindings, options);
                    this.handler = $(widget.element).bind("keypress",[]);
                refresh() {}
        class NumericOptions extends {
            value = 5;
            onKeyPress(e) {
                console.log("onKeyPress", e);
            constructor() {
        $(function () {
            var viewModel = new NumericOptions();
            kendo.bind(document.body, viewModel);

    Alexander Popov
    Telerik by Progress
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top