Knockout Binding for KendoUI Grid

Knockout Binding for KendoUI Grid

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">
 <div data-bind="kendoGrid: data, selected: selectedItem, key: 'id', gridOptions: gridOptions" />

 <hr/>

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

JavaScript

ko.bindingHandlers.kendoGrid = {
        init: function (element, valueAccessor, allBindingsAccessor, viewModel) {
            var unwrap = ko.utils.unwrapObservable;
            var dataSource = valueAccessor();
            var binding = allBindingsAccessor();
            var options = {};
            var source;

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

            var handleValueChange = function (arg) {
                var selectedItems = this.select();
                var selected = $.map(selectedItems, function (column) {
                    return $(item).text();
                });

                if (options.selected)
                    options.selected(arg);
            };

            var dataChange = function (e) {
                var keyProp = binding.key;

                //Use this keyProp to find the model obj edited in the observable Array 
                // and edit each of its properties manually from the kendo DataSource

            };

            options.change = handleValueChange;
            if (options.dataBound)
                options.dataBound = options.dataBound;

            if (unwrap(dataSource) instanceof Array) {
                if (!ko.isObservable(dataSource)) {
                    source = ko.observableArray(dataSource);
                }
                else
                    source = dataSource;

                var mappedSource = ko.dependentObservable(function () {
                    var mapped = ko.utils.arrayMap(unwrap(dataSource), function (item) {
                        var result = {};
                        for (var prop in item) {
                            if (item.hasOwnProperty(prop)) {
                                result[prop] = unwrap(item[prop]);
                            }
                        }
                        return result;
                    });
                    return mapped;
                },...