This is a migrated thread and some comments may be shown as answers.

keypress event and NumericTextBox / datepicker

1 Answer 703 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 20 Jan 2017, 02:08 PM

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!

1 Answer, 1 is accepted

Sort by
0
Alexander Popov
Telerik team
answered on 24 Jan 2017, 03:01 PM
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.
Tags
MVVM
Asked by
Justin
Top achievements
Rank 1
Answers by
Alexander Popov
Telerik team
Share this question
or