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

<input data-bind="kendoComboBox: { data: choices, value: selectedChoice }" />
<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 properties to use for displaying in the field and for the value. The addChoice button shows that the ComboBox is kept in sync as the observableArray bound to the data receives new items.

<button data-bind="click: open, disable: isOpen">Open</button>
<input type="checkbox" data-bind="checked: enabled" /> Enable<br/>
<hr/>
<input data-bind="kendoComboBox: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedChoice, isOpen: isOpen, enabled: enabled }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>
<hr/>
<button data-bind="click: addChoice">Add New Choice</button>

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

    this.selectedChoice = ko.observable();
    this.enabled = ko.observable(true);
    this.isOpen = ko.observable(false);
    this.open = function() {
        this.isOpen(true);
    };
    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.kendoComboBox.options. This helps to simplify the markup for settings that can be used as a default for all instances of this widget.

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

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

ko.bindingHandlers.kendoComboBox.options.highlightFirst = false;

                            ko.applyBindings(new ViewModel());