TEST 3

another multi select test - this one uses an older version of kendo

by caine0323

HTML

<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://cdn.kendostatic.com/2015.1.429/js/kendo.all.min.js"></script>
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://kendo.cdn.telerik.com/2015.1.429/styles/kendo.common.min.css">
<script src="http://rniemeyer.github.io/knockout-kendo/js/knockout-kendo.min.js"></script>
<select data-bind="multiSelect: { dataSource: choices, value: selectedChoice }"></select>
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

JavaScript

ko.bindingHandlers.multiSelect = {
    init: function (element, valueAccessor, allBindings, data, context) {
        var options = ko.toJS(valueAccessor());
        
        options.change = function (e) {
            valueAccessor().value(e.sender.value());
        }

        $(element).kendoMultiSelect(options);
        var multiselect = $(element).data("kendoMultiSelect");

        if (valueAccessor().hasOwnProperty("widget")) {
            valueAccessor().widget(multiselect);
        }          

        ko.utils.domNodeDisposal.addDisposeCallback(element, function () {
            multiselect.destroy();
        });
    }
};

var ViewModel = function() {
   this.choices = ko.observableArray(["apple", "orange", "banana"]);
   this.selectedChoice = ko.observable();
};

ko.applyBindings(new ViewModel());