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

Custom Widget Binders and TypeScript

2 Answers 109 Views
MVVM
This is a migrated thread and some comments may be shown as answers.
Justin
Top achievements
Rank 1
Justin asked on 18 Jan 2017, 05:32 PM

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.

2 Answers, 1 is accepted

Sort by
0
Stefan
Telerik team
answered on 20 Jan 2017, 12:37 PM
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
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 (charts) and form elements.
0
Justin
Top achievements
Rank 1
answered on 20 Jan 2017, 01:50 PM

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);
        }
    }
}
Tags
MVVM
Asked by
Justin
Top achievements
Rank 1
Answers by
Stefan
Telerik team
Justin
Top achievements
Rank 1
Share this question
or