Binding knockout doesn't work with Kendo multiSelect

Question

I have a multiSelect element HTML:

<li>
        <select id="doc" data-role="multiselect"
            data-placeholder="Choose...'"
            data-value-primitive="true"
            data-value-field="name"
            data-text-field="name"
            data-bind="value: sel, source: list"></select>
        <hr/>
        <span data-bind="text: sel"></span>
    </li>

I see the value only in the console and and not in the span

Answer 1

  function tab() { var tabs = ""; for (var i = 0; i < stringify.level; i++) { tabs += "\\t"; } return tabs; } function stringify(items) { var item, itemString, levelString = ""; for (var i = 0; i < items.length; i++) { item = items[i]; if (!item.items) { itemString = kendo.stringify(item); } else { stringify.level++; var subnodes = stringify(item.items); stringify.level--; delete item.items; itemString = kendo.stringify(item); itemString = itemString.substring(0, itemString.length - 1); itemString += ",\\"items\\":[\\r\\n" + subnodes + tab() + "]}"; } levelString += tab() + itemString; if (i != items.length - 1) { levelString += ","; } levelString += "\\r\\n"; } return levelString; } stringify.level = 1; $(document).ready(function() { var Node = kendo.data.Node; var viewModel = kendo.observable({ colors: [{ name: "Red", value: "#f00" }, { name: "Green", value: "#0f0" }, { name: "Blue", value: "#00f" } ], multiSelectValue: [], displayMultiSelectValue: function() { var multiSelectValue = this.get("multiSelectValue"); return kendo.stringify(multiSelectValue); } }); kendo.bind($("div.demo-section"), viewModel); }); 

 <script src="//kendo.cdn.telerik.com/2017.1.223/js/jquery.min.js"></script> <script src="//kendo.cdn.telerik.com/2017.1.223/js/kendo.all.min.js"></script> <link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.mobile.min.css" rel="stylesheet" /> <link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.material.min.css" rel="stylesheet" /> <link href="//kendo.cdn.telerik.com/2017.1.223/styles/kendo.common-material.min.css" rel="stylesheet" /> <div id="example"> <div class="demo-section k-content wide"> <h4>Current view model state</h4> <pre class="prettyprint"> { multiSelectValue: <span data-bind="text: displayMultiSelectValue"></span> } </pre> </div> <div class="demo-section k-content wide"> <ul class="fieldlist"> <li> <h4>MultiSelect:</h4> <select data-role="multiselect" multiple="multiple" data-placeholder="choose..." data-value-primitive="true" data-value-field="name" data-text-field="name" data-bind="source: colors, value: multiSelectValue"></select> </li> <li data-bind="text: multiSelectValue"></li> <li>Should be above</li> </ul> </div> </div> 

I edited the Kendo demo to be more like your code and it displays [object Object] in the span.

    <ul class="fieldlist">
      <li>
        <h4>MultiSelect:</h4>
        <select data-role="multiselect"
         multiple="multiple"
         data-placeholder="choose..."
         data-value-primitive="true"
         data-value-field="name"
         data-text-field="name"
         data-bind="source: colors, value: multiSelectValue"></select>
      </li>
      <li data-bind="text: multiSelectValue"></li>
      <li>Should be above</li>
    </ul>

The issue may be related to the toString conversion of your value .