Extended Binder

2 posts, 0 answers
  1. LuLu
    LuLu avatar
    1 posts
    Member since:
    Aug 2013

    Posted 23 Feb 2015 Link to this post

    Hi, I'm trying to customize and
    extend the datepicker.

    First I extended  Binder by

    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);





    change: function(e){






    Then I extended DatePicker


    CustomDatePicker = kendo.ui.DatePicker.extend({

    init: function(element, options) {

    kendo.ui.DatePicker.prototype.init.call(this, element, options);





    options: {          




    onChange: function(e){







    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:



         data-bind="customValue: data"

         data-format="dd.MM.yyyy" />
  2. Georgi Krustev
    Georgi Krustev avatar
    3725 posts

    Posted 25 Feb 2015 Link to this post

    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.

    Georgi Krustev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top