Edit this page

Custom Binding

The Kendo UI MVVM component allows for the custom bindings.

Important

The custom binding should be registered before the kendo.bind method is called.

Getting Started

A custom binding is registered by extending the kendo.data.Binder object.

One-Way Custom Bindings

The example below demonstrates how to register a one-way binding. As a result, the HTML element is updated when the view-model changes.

Example
    <p><label><input type="checkbox" data-bind="checked: slideValue" />toggle slideValue</label></p>

    <div id="target" style="width:200px;height:200px;background:#fc9;" data-bind="slide: slideValue">
        Orange Square.
    </div>

    <script>
        kendo.data.binders.slide = kendo.data.Binder.extend({
            refresh: function() {
                var value = this.bindings["slide"].get();

                if (value) {
                    $(this.element).slideDown();
                } else {
                    $(this.element).slideUp();
                }
            }
        });

        var viewModel = kendo.observable({
            slideValue: true
        });

        kendo.bind(document.body, viewModel);
    </script>

Two-Way Custom Bindings

The example below demonstrates how to register a two-way binding. As a result, both the HTML element and the View-Model are updated.

Example
    <input data-bind="numericValue: number" />
    Input value: <span data-bind="text: number" />

    <script>
        kendo.data.binders.numericValue = kendo.data.Binder.extend({
            init: function(element, bindings, options) {
                //call the base constructor
                kendo.data.Binder.fn.init.call(this, element, bindings, options);

                var that = this;
                //listen for the change event of the element
                $(that.element).on("change", function() {
                    that.change(); //call the change function
                });
            },
            refresh: function() {
                var that = this,
                    value = that.bindings["numericValue"].get(); //get the value from the View-Model

                $(that.element).val(value); //update the HTML input element
            },
            change: function() {
                var value = this.element.value;
                //in this example the View-Model will be updated only if the value of the input is a number
                if (!isNaN(value)) {
                    this.bindings["numericValue"].set(value); //update the View-Model
                }
            }
        });

        //View-Model source
        var viewModel = kendo.observable({
            number: 10
        });

        kendo.bind(document.body, viewModel);
    </script>

Custom Widget Binding

The example below demonstrates how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.

Example
    <input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />​

    <script>
    kendo.data.binders.widget.max = kendo.data.Binder.extend({
        init: function(widget, bindings, options) {
            //call the base constructor
            kendo.data.Binder.fn.init.call(this, widget.element[0], bindings, options);
        },
        refresh: function() {
            var that = this,
            value = that.bindings["max"].get(); //get the value from the View-Model
            $(that.element).data("kendoNumericTextBox").max(value); //update the widget
        }
    });

    //View-Model source
    var viewModel = kendo.observable({
        value: 5,
        max: 10
    });

    kendo.bind(document.body, viewModel);    
    </script>

Custom Binding in TypeScript

The following example demonstrates how to bind the max value of a Kendo UI NumericTextBox by using the custom widget biding approach. As a result, the widget is updated when the View-Model changes.

Example
    <input data-role="numerictextbox" id="numeric" data-bind="value: value, max: max" />​

    /// <reference path="jquery.d.ts" />
    /// <reference path="kendo.all.d.ts" />

    module kendo.data.binders.widget {

        export class max 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["max"].get(); //get the value from the View-Model
                that.element.max(value);
            }
        }
    }

    class NumericOptions extends kendo.data.ObservableObject {
        value = 5;
        max = 10;

        constructor() {
            super();

            super.init(this);
        }
    }

    class ViewModel extends kendo.data.ObservableObject {
        person = new NumericOptions();

        constructor() {
            super();

            super.init(this);
        }
    }

    $(function () {
        var viewModel = new NumericOptions();

        kendo.bind(document.body, viewModel);

    });

Custom Widget Binding In TypeScript

The example demonstrates how to use custom widget binding in TypeScript. It shows how to bind the max value of a Kendo UI NumericTextBox widget. As a result, the widget is updated when the View-Model changes.

Example

/// ///

module kendo.data.binders.widget {

export class max 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["max"].get(); //get the value from the View-Model
        that.element.max(value);
    }
}

}

class NumericOptions extends kendo.data.ObservableObject { value = 5; max = 10;

constructor() {
    super();

    super.init(this);
}

}

class ViewModel extends kendo.data.ObservableObject { person = new NumericOptions();

constructor() {
    super();

    super.init(this);
}

}

$(function () { var viewModel = new NumericOptions();

kendo.bind(document.body, viewModel);

});

Breakdown of Code Elements

  • init—This is the binding constructor. If this function is overridden, the base Binder constructor should be called explicitly.
  • refresh—This is the handler responsible for updating the HTML element. It is executed each time when the value of the bound MVVM field changes. The bound DOM element and the attached MVVM bindings could be retrieved through the context of the function.
Example
refresh: function() {
    this.bindings //contains all bindings for the current element
    this.element //reference the to the DOM element
}
  • change—This is the handler responsible for updating the View-Model. It listens for the change event of the bound HTML input element. The View-Model is updated through the set(value) method of the binding.
Example
change: function() {
    this.bindings //contains all bindings for the current element
    this.element //reference to the DOM element
}
  • Binding methods—Bindings have two important methods: get() and set(value).

The get method returns the value from the View-Model.

Example
this.bindings["slide"].get() //outputs true

The set method accepts one parameter and sets it as a new value of the bound field from the View-Model.

Example
this.bindings["slide"].set(false) //sets the slideValue to false

Basic Usage

Custom bindings are set via data-bind attribute, as demonstrated in the example below.

Example
<div id="target" data-bind="slide: slideValue">
    One Big Orange Square.
</div>

See Also

Other articles on the Kendo UI MVVM component and bindings:

Is this article helpful? Yes / No
Thank you for your feedback!

Give article feedback

Tell us how we can improve this article

close
Dummy