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

<input data-bind="kendoColorPicker: { palette: colorPalette, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

var ViewModel = function() {
   this.colorPalette = ko.observable("basic");
   this.selectedChoice = ko.observable("#ffffff");
};

                            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/>
<hr/>
<button class="btn" data-bind="click: addChoice">Add Choice</button>
<hr/>
<input data-bind="kendoColorPicker: { palette: colorPalette, value: selectedChoice, enabled: isEnabled }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

var ViewModel = function() {
    this.colorPalette = ko.observableArray([
        "#f0d0c9", "#e2a293", "#d4735e", "#65281a",
        "#eddfda", "#dcc0b6", "#cba092", "#7b4b3a",
        "#fcecd5", "#f9d9ab", "#f6c781", "#c87d0e",
        "#e1dca5", "#d0c974", "#a29a36", "#514d1b",
        "#c6d9f0", "#8db3e2", "#548dd4", "#17365d"
    ]);

    this.selectedChoice = ko.observable("#17365d");
    this.isEnabled = ko.observable(true);
    this.addChoice = function() {
        this.choices.push("#ddd");
    };
};

                            ko.applyBindings(new ViewModel());

This example demonstrates the ability to configure options globally by setting properties in ko.bindingHandlers.kendoColorPicker.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="kendoColorPicker: { palette: colorPalette, value: selectedChoice }" />
<hr/>
Selected: <strong data-bind="text: selectedChoice"> </strong>

var ViewModel = function() {
   this.colorPalette = ko.observable("websafe");
   this.selectedChoice = ko.observable("#fff");
};

//search text by what it contains rather than what is starts with
ko.bindingHandlers.kendoColorPicker.options = {
   titleSize: 20
};

                            ko.applyBindings(new ViewModel());