Knockout Binding for KendoUI DropDownBox

Knockout Binding for KendoUI DropDownBox

by Rupesh Kokal

HTML

<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.default.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2011.3.1129/styles/kendo.common.min.css">
<script src="http://cdn.kendostatic.com/2011.3.1129/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/jquery.tmpl.js"></script>
<script src="http://rniemeyer.github.com/KnockMeOut/Scripts/knockout-latest.debug.js"></script>
<div id="example">
 <input data-bind="kendoDropDown: myOptions, value: mySelectedOption, optionsText: 'name', optionsValue: 'id', dropDownOptions: {optionLabel: 'select one...'}" />

 <hr/>

 <div data-bind="text: ko.toJSON(mySelectedOption)"></div>      

 <button data-bind="click: addItem">Add Item</button>
 <button data-bind="click: resetDefault">Reset Default</button>
 <div data-bind="text: ko.toJSON(myOptions)"></div>
</div>

JavaScript

ko.bindingHandlers.kendoDropDown = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var unwrap = ko.utils.unwrapObservable;
            var dataSource = valueAccessor();
            var binding = allBindingsAccessor();
            var valueProp = unwrap(binding.optionsValue);
            var labelProp = unwrap(binding.optionsText) || valueProp;
            var options = {};

            if (binding.dropDownOptions) {
                options = $.extend(options, binding.dropDownOptions);
            }

            //handle value changing
            var modelValue = binding.value;
            if (modelValue) {
                var handleValueChange = function () {
                    //Get the selected Value from the Kendo ComboBox
                    var selectedText = this.text();
                    var selectedValue = this.value();
                    if (ko.isWriteableObservable(modelValue)) {
                        //Since this is an observable, the update part will fire and select the 
                        //  appropriate display values in the controls
                        modelValue(selectedValue);
                    } else {  //write to non-observable
                        if (binding['_ko_property_writers'] && binding['_ko_property_writers']['value']) {
                            binding['_ko_property_writers']['value'](selectedValue);
                        }
                    }

                    return false;
                };

                options.change = handleValueChange;
            }

            //handle the choices being updated in a Dependant Observable (DO), so the update function doesn't 
            // have to do it each time the value is updated. Since we are passing the dataSource in DO, if it is
            // an observable, when you change the dataSource, the dependentObservable will be re-evaluated
            // and its subscribe event will fire allowing us to update...