Extended Binder

[LuLu]

Hi, I'm trying to customize and
extend the 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){

 
          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" />

[Georgi Krustev]

Hello Miroslav,

I would suggest you this help article (if you haven't) that demonstrates how to create a custom MVVM binding that works with widgets. Based on the article the init method of the binder should look like this:

init: function(widget, bindings, options) {
     //call the base constructor
     kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);

     //wire the change event of the widget
     widget.bind("change", $.proxy(this.change, this)); //use the binder's change event handler
},

Notice how the change event of the widget is wired in order to listen for changes in the value. In the binder's change event handler, you can update the model field accordingly.

Refer to this Githuib link that demonstrates how the current value binding is implemented.

Regards,
Georgi Krustev
Telerik