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

Bind the Container to Extended ObservableObject with Default Values in MVVM

Environment

Product Progress® Kendo UI® MVVM Architecture
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript

Description

How can I bind a container to an extended ObservableObject with default values in Kendo UI MVVM?

Solution

The following example demonstrates how to achieve the desired scenario. The model passes the default values to the Observable.fn.init method.

As an alternative, default values can be defined using the Observable.fn.set method.

    <div id="form">
      <fieldset>
        <legend>WORKING:</legend>
        <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
          <input type="text" data-bind="value: filter.name" data-value-update="keypress" title="value" data-role="textbox" class="k-input-inner" /></span>
        <span class="k-input k-textbox k-input-solid k-input-md k-rounded-md k-valid" style="">
          <input type="text" data-bind="value: filter.name" data-value-update="keypress" title="value" data-role="textbox" class="k-input-inner" />
        </span>
        <button type="button" data-bind="events: {click: click}" class="k-button k-button-md k-rounded-md k-button-solid k-button-solid-base">
          <span class="k-button-text">this.set("filter.name", "test");</span>
        </button>
      </fieldset>
    </div>
    <script>
      $(function() {
        var BaseVM = kendo.data.ObservableObject.extend({
          init: function(values) {
            //Define default values
            var defaultValues = {
              filter: {name: "John Doe"}
            };

            kendo.data.ObservableObject.fn.init.call(this, $.extend({}, defaultValues, values));
          },
          click: function() {
            this.set("filter.name", "test");
          }
        });

        var viewModel2 = BaseVM.extend({});

        kendo.bind($("#form"), new viewModel2());
      });
    </script>

See Also

In this article