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: doIt">Do it</a>





<div class="aGrid" data-bind="jqxGrid: { source: Something, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>

<div class="aGrid" data-bind="kendoGrid: Everything.People"></div>

<div class="aGrid" data-bind="jqxGrid: { source: Everything().People, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>

<div data-bind="foreach: Everything().People">
    <div data-bind="text: Name"></div>
</div>

CSS

.aGrid {
    margin: 10px;
}

JavaScript

var qwer = {
    Everything: {
        People: [{
            Name: "Fred"
        }, {
            Name: "John"
        }],
        Animals: [{
            Name: "Sam"
        }, {
            Name: "Pete"
        }]
    },
    Something: [{
        Name: "Joe"
    }, {
        Name: "Sara"
    }],
}

var what = {
    People: [{
        Name: "George"
    }, {
        Name: "Scot"
    }],
    Animals: [{
        Name: "Tammy"
    }, {
        Name: "Sue"
    }]
};

var asdf = function () {
    this.Something = ko.observableArray([{
        Name: "Jimmy"
    }, {
        Name: "John"
    }]);
    this.Everything = ko.observable({});
    this.doIt = function () {
        this.Everything(ko.mapping.fromJS(what));
        ko.mapping.fromJS(what, {}, this.Everything);
    };
};


$(function () {

    var d2 = ko.mapping.fromJS(qwer);
    var d3 = ko.mapping.fromJS(new asdf());
    ko.applyBindings(d3);

});