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