Custom Widget Binders and TypeScript

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

    Posted 18 Jan Link to this post

    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. Stefan
    Admin
    Stefan avatar
    912 posts

    Posted 20 Jan Link to this post

    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 visualization (charts) and form elements.
  3. Justin
    Justin avatar
    4 posts
    Member since:
    Feb 2016

    Posted 20 Jan in reply to Stefan Link to this post

    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);
            }
        }
    }
Back to Top