[Solved] Custom Widget Binders and TypeScript

[Justin]

I am trying to bind the keypress event on kendo widgets so that I can fire MVVM change-tracking updates on keypress, instead of blur; the central issue being that I have a Save button linked to a boolean for hasChanges, and this boolean only updates on blur (change) ... I would prefer that it update automatically on keypress, which is not exposed by the kendo widgets.

I have found examples of doing this in Javascript, but we are using typeScript, and the .d.ts file does not contain the data necessary to make this possible. I have found examples of how to deal with this for custom bindings, but not for custom *widget* bindings.

What I want to do is:

kendo.data.binders.widget.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 () { binding.get(); });
    },
    refresh: function () { }
});

 

... but I want to do that in type script, not javascript. It fails on .binders.widget.keyPress, as .binders is only declared as a namespace.

[Stefan]

Hello Justin,

There is a specific syntax which has to be used when a custom widget binding is used with TypeScript.

module kendo.data.binders.widget {

    export class custom 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["custom"].get(); //get the value from the View-Model
            that.element.custom(value);
        }
    }
}

As I notice that this is not available in the documentation, I will add it shortly.

Regards,
Stefan
Telerik by Progress

[Justin]

That's awesome, thank you so much! For anyone looking to bind to keypress, it took me a few minutes to realize that I had to replace 'custom' with 'keypress'; don't try to code at 6:30 AM without your coffee! Full keypress implementation was accomplished with:

 

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);
        }
    }
}