New to Kendo UI for jQuery? Download free 30-day trial

Implement Custom MVVM Bindings in Custom Widgets


Product Progress® Kendo UI® MVVM Architecture


I have a custom Kendo UI widget for jQuery which currently uses the value binding to set data inside it over MVVM.

How can I provide a second value to another custom property over MVVM?


Define a custom widget and custom binding.

<div data-role="somewidget" data-bind="value: value, bgcolour: bgColour" ></div>
<input type="button" value="Click to change color" data-bind="events: { click: changeColor }"/>

<script> ={
    init: function(widget, bindings, options) {
      //call the base constructor, widget.element[0], bindings, options);
    refresh: function() {
      var that = this,
          value = that.bindings["bgcolour"].get(); //get the value from the View-Model

      $(that.element).css('background-color', value); //update the widget

  var kendo = window.kendo,
      ui = kendo.ui,
      Widget = ui.Widget;

  var SomeWidget = Widget.extend({
    init: function (element, options) {
      var that = this;, element, options);
    value: function (value) {
      if (value !== undefined) {
        this._value = value;
      } else {
        return this.element.text();
    _value: '',
    bgcolour: function (value) {
      if(value !== undefined) {
        this._bgcolour = value;
        this.element.css('background-color', this._bgcolour);
      } else {
        return this.element.css('background-color');
    _bgcolour: '',
    options: {
      name: 'SomeWidget'
    refresh: function () {
      this.element.css('background-color', this._bgcolour);


  //View-Model source
  var viewModel = kendo.observable({
    value: "Test it",
    bgColour: '#ff00ff',
    changeColor: function() {
      this.set('bgColour', '#0000ff');

  kendo.bind(document.body, viewModel);    

See Also

In this article