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

Bind MultiSelect Values to Templates


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


How can I bind the Kendo UI MultiSelect value to a template by using MVVM?


The following example demonstrates how to achieve the desired scenario.

    <div id="example">
      <div class="demo-section k-header">
        <div class="box-col" data-bind="visible: isPrimitive">
          <select data-role="multiselect"
                  data-placeholder="Type a product e.g. 'Chai'"
                  data-bind="value: selectedProduct,
                             source: products,
                             visible: isVisible,
                             enabled: isEnabled,
                             events: {
                             change: onChange,
                             open: onOpen,
                             close: onClose
                  style="width: 300px"

          <tbody data-template="row-template" data-bind="source: selectedProduct"></tbody>
        <script id="row-template" type="text/x-kendo-template">
                <td data-bind="text: ProductName"></td>
                <td data-bind="text: ProductID"></td>

      var viewModel = kendo.observable({
        selectedProduct: null,
        isPrimitive: true,
        isVisible: true,
        isEnabled: true,
        primitiveChanged: function() {
          this.set("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() {
          var selectedProduct = this.get("selectedProduct");
          $(".console").append("<p>event :: change (" + this.displaySelectedProduct() + ")</p>");
        onClose: function() {
          $(".console").append("<p>event :: close</p>");
        products: new{
          transport: {
            read: {
              url: "",
              dataType: "jsonp"
      kendo.bind($("#example"), viewModel);

See Also

In this article