Update MVVM-Bound Models on Loading the DropDownList
Environment
| Product | Progress® Kendo UI® DropDownList for jQuery |
| Operating System | Windows 10 64bit |
| Visual Studio Version | Visual Studio 2017 |
| Preferred Language | JavaScript |
Description
How can I update an MVVM-bound model on load in a Kendo UI DropDownList?
Solution
The following example demonstrates how to achieve the desired scenario.
<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>