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

  2. Alexander Popov
    Admin
    Alexander Popov avatar
    1444 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 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
    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