Kendo Knockout grid with nested observable binding

by alexdresko

HTML

<script src="http://knockoutjs.com/downloads/knockout-2.2.1.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxcore.js"></script>
<link rel="stylesheet" href="http://jqwidgets.com/public/jqwidgets/styles/jqx.base.css">
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxknockout.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxscrollbar.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxbuttons.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxdata.js"></script>
<script src="http://jqwidgets.com/public/jqwidgets/jqxgrid.selection.js"></script>
<script src="https://raw.github.com/SteveSanderson/knockout.mapping/master/build/output/knockout.mapping-latest.debug.js"></script>
<script src="http://cdn.kendostatic.com/2012.3.1114/js/kendo.web.min.js"></script>
<script src="http://rniemeyer.github.com/knockout-kendo/js/knockout-kendo.min.js"></script>
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.common.min.css">
<link rel="stylesheet" href="http://cdn.kendostatic.com/2012.3.1114/styles/kendo.default.min.css">
<a href="#" data-bind="click: load">Load</a>

<div class="aGrid" data-bind="kendoGrid: Thing"></div>
<div class="aGrid" data-bind="kendoGrid: Junk().People"></div>
<div class="aGrid" data-bind="kendoGrid: Stuff().People"></div>
<div class="aGrid" data-bind="kendoGrid: Stuff.People"></div>
<div class="aGrid" data-bind="kendoGrid: Stuff.Things"></div>
<div class="aGrid" data-bind="kendoGrid: Stuff().Things"></div>
<div class="aGrid" data-bind="kendoGrid: Crack"></div>
<div class="aGrid" data-bind="kendoGrid: Crack"></div>
<div class="aGrid" data-bind="kendoGrid: Poop().Jar"></div>
<div class="aGrid" data-bind="kendoGrid: Poop.Jar"></div>
<div class="aGrid" data-bind="kendoGrid: Poop.Jar"></div>


<div data-bind="with: Stuff">
    <div data-bind="text: ko.toJSON($data, null, 2)"></div>
   ...

CSS

.aGrid {
    margin: 10px;
}

JavaScript

var dataFromServer = {
    People: ko.observableArray([{
        Name: "George"
    }, {
        Name: "Scot"
    }]),
    Things: [{
        Name: "George"
    }, {
        Name: "Scot"
    }]
};

var viewModel = function () {
    this.Thing = ko.observable([{
        Name: "George"
    }, {
        Name: "Scot"
    }]);
    this.Junk = ko.observable({
        People: ko.observableArray([{
            Name: "George"
        }, {
            Name: "Scot"
        }])
    });
    this.Stuff = ko.observable({
        People: [],
        Things: []
    });
    this.Crack = ko.observableArray([]);
    this.Poop = {};
    this.Poop.Jar = ko.observableArray([]);
    this.load = function () {
        this.Stuff(dataFromServer);
        this.Crack([{
            Name: "George"
        }, {
            Name: "Scot"
        }]);
        
        this.Poop.Jar([{
            Name: "George"
        }, {
            Name: "Scot"
        }]);

    };
};


$(function () {

    var vm = new viewModel();
    ko.applyBindings(vm);

});