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

CSS

.aGrid {
margin: 10px;    
}

JavaScript

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


$(function () {

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

});