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

Preselect MultiSelect Items by Using MVVM Binding


Product Progress® Kendo UI® MultiSelect for jQuery
Operating System Windows 10 64bit
Visual Studio Version Visual Studio 2017
Preferred Language JavaScript


How can I preselect items by using MVVM binding in the Kendo UI MultiSelect widget?


The following example demonstrates how to achieve the desired scenario.

    <div id="example" >
      <div class="demo-section k-header">
        <button id="set">Set Source</button>
        <select data-role="multiselect"
                data-bind="{source: source, value: products}"
        $(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{
              type: "odata",
              serverFiltering: true,
              transport: {
                read: {
                  url: "",

  "change", function() {
              var products = model.products;

              model.set("products", []);                
              model.set("products", products);                

            model.set("source", source);
      <style scoped>
        .demo-section {
          width: 400px;

See Also

In this article