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.