Knockout kendo grid template binding

http://stackoverflow.com/questions/10996945/knockout-kendo-grid-template-binding

by tyrsius

HTML

<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.common.min.css">
<link rel="stylesheet" href="http://rniemeyer.github.com/knockout-kendo/css/kendo.default.min.css">
<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.all.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<input data-bind="kendoDropDownList: { dataTextField: 'name', dataValueField: 'id', data: choices, value: selectedId }"
/>
<input data-bind="kendoDropDownList: { dataTextField: 'caption', dataValueField: 'id', data: selectedChoice().shapes, value: selectedShapeId }"
/>
<hr/>Selected: <pre data-bind="text: ko.toJSON(selectedChoice, null, 2)"></pre>

<hr/>

CSS

div.hidden {
    display:none;
}

JavaScript

var Fruit = function(data) {
    var self = this;
    self.id = data.id;
    self.name = data.name;
    self.shapes = ko.observableArray(data.shapes);
};

var ViewModel = function (data) {
    this.choices = ko.observableArray(ko.utils.arrayMap(data, function(i){
        return new Fruit(i);
    }));

    this.selectedId = ko.observable("2");
    this.selectedShapeId = ko.observable("5");
    this.selectedChoice = ko.computed(function () {
        var id = this.selectedId();
        return ko.utils.arrayFirst(this.choices(), function (choice) {
            return choice.id === id;
        });
    }, this);
};

var initData = [{
        id: "1",
        name: "apple",
        shapes: [{
            id: "5",
            caption: "circle"
        }, {
            id: "6",
            caption: "square"
        }]
    }, {
        id: "2",
        name: "orange",
        shapes: [{
            id: "5",
            caption: "circle"
        }]
    }, {
        id: "3",
        name: "banana",
        shapes: [{
            id: "5",
            caption: "circle"
        }, {
            id: "6",
            caption: "square"
        }, {
            id: "7",
            caption: "triangle"
        }]
    }];
window.vm = new ViewModel(initData);
ko.applyBindings(window.vm);