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

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-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 class="box-col console-section">
        <div class="console"></div>

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

        setTimeout(function() {

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

See Also

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

In this article
Not finding the help you need? Improve this article