This example demonstrates passing the basic options required by the MultiSelect plugin.

<select data-bind="kendoMultiSelect: { data: choices, value: selectedChoice }"></select>
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

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

                            ko.applyBindings(new ViewModel());

This example demonstrates binding against objects for the source data and specifying the property to use for the value. The addChoice button also shows that the choices are kept in sync as the observableArray bound to the data receives new items.

<input type="checkbox" data-bind="checked: isEnabled" /> Enabled<br/>
<input class="search-query" data-bind="value: search, valueUpdate: 'afterkeydown'" placeholder="enter search term" /><br/>
<hr/>
<button class="btn" data-bind="click: addChoice">Add Choice</button>
<hr/>
<select data-bind="kendoMultiSelect: { dataTextField: 'name', data: choices,
               value: selectedChoices, search: search, enabled: isEnabled }"></select>
<hr/>
Selected:
<div data-bind="foreach: selectedChoices">
    <strong data-bind="text: name"> </strong>
</div>

var ViewModel = function() {
    this.choices = ko.observableArray([
        { id: "1", name: "apple"},
        { id: "2", name: "orange"},
        { id: "3", name: "banana"}
    ]);

    this.selectedChoices = ko.observable();
    this.isEnabled = ko.observable(true);
    this.search = ko.observable();
    this.addChoice = function() {
        var num = this.choices().length + 1;
        this.choices.push({ id: num, name: "new" + num});
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates the ability to configure options globally by setting properties in ko.bindingHandlers.kendoMultiSelect.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

<select data-bind="kendoMultiSelect: { data: choices, value: selectedChoice }"></select>
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

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

//search text by what it contains rather than what is starts with
ko.bindingHandlers.kendoMultiSelect.options.filter = "contains";

                            ko.applyBindings(new ViewModel());