Kendo Knockout grid with nested observable binding
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>
<a href="#" data-bind="click: load">Load</a>
<div data-bind="if: Stuff().People">
<div class="aGrid" data-bind="jqxGrid: { source: Stuff().People, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>
<div class="aGrid" data-bind="jqxGrid: { source: Stuff().People, columns: [ {text: 'Name', datafield: 'Name'} ], autoheight: true, sortable: true, altrows: true, enabletooltips:true }"></div>
</div>
CSS
.aGrid {
margin: 10px;
}
JavaScript
var dataFromServer = {
People: ko.observableArray([{
Name: "George"
}, {
Name: "Scot"
}])
};
var viewModel = function () {
this.Stuff = ko.observable({});
this.load = function () {
this.Stuff(dataFromServer);
alert("ciao£");
};
};
$(function () {
var vm = new viewModel();
ko.applyBindings(vm);
alert("ciao£");
});