2

I'm trying to customize and extend datepicker. First I extended Binder by customValue:

kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
    init: function (element, bindings, options) {
        kendo.data.Binder.fn.init.call(this, element, bindings, options);
    },

    refresh: function(e){
        var path = this.bindings.customValue.path,
            source = this.bindings.customValue.source,
            value = source.get(path);

        this.element.value(value);
    },

    change: function(e){
        // this method is not triggered 
        debugger;
    }
});

Then I extended DatePicker widget:

CustomDatePicker = kendo.ui.DatePicker.extend({
    init: function(element, options) {
        kendo.ui.DatePicker.prototype.init.call(this, element, options);

        this.bind('change', this.onChange);
    },

    options: {           
        name: "CustomDatePicker",
    },

    onChange: function(e){
        debugger;
    },
});

kendo.ui.plugin(CustomDatePicker);

The method 'refresh' of the custom binder is triggered when a view-model changes, so data can flow from the view-model to the widget. It works well. But I have problem with binding from the widget to the view-model (reverse flow). At first I thought that the change in the datepicker trigger 'change' method in 'customValue' binder, but it doesn't. CustomDatePicker.onChange method is triggered, but inside it the view-model is out of scope, so view-model can't be set. My question is, how to update the view-model, when value of the widget is changed? Thank for advice.

Only for illustration widget is initialized like this:

<input
     data-role="datepickercustom"
     data-bind="customValue: data"
     data-format="dd.MM.yyyy" />
KubaKubikula
  • 370
  • 2
  • 14

1 Answers1

0

Kendo doesn't automatically setup the call to the change function in the binding. You will need to bind the change function to the change event of the widget yourself.

kendo.data.binders.widget.customValue = kendo.data.Binder.extend({
   init: function (widget, bindings, options) {
       kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        var that = this;
        $(widget.element).on('change', function () {
            that.change();
        });
    },

    .
    .
    .

    change: function() {
        // this method will now be triggered 
        debugger;
    }
});

Be sure to follow the widget binding pattern (widget, bindings, options) not (element, binding, options).

It doesn't seem you need to extend the DatePicker widget, unless you need to implement other behaviors separate from updating the view model.

Russ Fuja
  • 21
  • 2