Update MVVM-Bound Models on Load

The following example demonstrates how to update an MVVM-bound model on load in a Kendo UI DropDownList.

  <div id="example">
    <div class="demo-section k-header">

      <div class="box-col">
        <h4>Choose a product e.g. 'Chai'</h4>
        <input data-role="dropdownlist"
               data-auto-bind="false"
               data-bound="updateModel"
               data-text-field="ProductName"
               data-value-field="ProductID"
               data-bind="value: selectedProduct,
                          source: products,
                          events: {
                          change: onChange,
                          open: onOpen,
                          close: onClose
                          }"
               style="width: 300px"
               /><button data-bind="click: onChange">click for selected value</button>
      </div>
      <div class="box-col console-section">
        <h4>Console</h4>
        <div class="console"></div>
      </div>
    </div>

    <script>
      function updateModel(e) {
        var widget = e.sender;

        setTimeout(function() {
          widget.trigger("change");
        });
      };

      var viewModel = kendo.observable({
        selectedProduct: null,
        displaySelectedProduct: function() {
          var selectedProduct = this.get("selectedProduct");
          return kendo.stringify(selectedProduct, null, 4);
        },
        onOpen: function() {
          $(".console").append("<p>event :: open</p>");
        },
        onChange: function() {
          $(".console").append("<p>event :: change (" + this.displaySelectedProduct() + ")</p>");
        },
        onClose: function() {
          $(".console").append("<p>event :: close</p>");
        },
        products: [{ProductName: "test title", ProductID: "1"}]
      });
      kendo.bind($("#example"), viewModel);
    </script>
  </div>

See Also

• JavaScript API Reference of the DropDownList
• How to Automatically Adjust the Width of a DropDownList
• How to Create DropDownLists with Long Items
• How to Detect Wrapper Focus Events
• How to Move the Group Label on Top of Items
• How to Prevent Popup Closure on Scroll
• How to Remove Items
• How to Set DataSource Dynamically
• How to Validate DropDownLists by Using Required Attributes

For more runnable examples on the Kendo UI DropDownList, browse its How To documentation folder.