Preselect Items by Using MVVM Binding

The following example demonstrates how to preselect items by using MVVM binding in the Kendo UI MultiSelect widget.

Example

    <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 Reorder Selected Items
• 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.