Preselect Items by Using MVVM Binding
The following example demonstrates how to preselect items by using MVVM binding in the Kendo UI MultiSelect widget.
<div id="example" >
<div class="demo-section k-header">
<h4>Products</h4>
<button id="set">Set Source</button>
<select data-role="multiselect"
data-text-field="ProductName"
data-value-field="ProductID"
data-bind="{source: source, value: products}"
></select>
</div>
<script>
$(document).ready(function() {
var model = kendo.observable({
products: [
{ ProductName: "Chang", ProductID: 2 },
{ ProductName: "Uncle Bob's Organic Dried Pears", ProductID: 7 }
],
source: []
});
kendo.bind(document.body, model);
$("#set").click(function() {
var source = new kendo.data.DataSource({
type: "odata",
serverFiltering: true,
transport: {
read: {
url: "https://demos.telerik.com/kendo-ui/service/Northwind.svc/Products",
}
}
});
source.one("change", function() {
debugger;
var products = model.products;
model.set("products", []);
model.set("products", products);
});
model.set("source", source);
})
});
</script>
<style scoped>
.demo-section {
width: 400px;
}
</style>
</div>
See Also
- MultiSelect JavaScript API Reference
- How to Cascade from DropDownList
- How to Filter Values in Widgets Sharing the Same Data
- How to Select All Values with Single Selection
- How to Use MultiSelect with Bootstrap Modal Window
- How to Wire Blur Event of the Filter Input
For more runnable examples on the Kendo UI MultiSelect, browse its How To documentation folder.