Handsontable example

by calvinslusarski

HTML

<script src="https://code.jquery.com/jquery-2.2.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/pikaday.js"></script>
<div class="handsontable" data-bind="handsontable: {
            data: self.listOfPersons(),
            colHeaders: ['First Name', 'Last Name'],
            columns: [
              {data: 'fname'},
              {data: 'lname'},
              { data: 'date',     
                type: 'date',
                dateFormat: 'MM/DD/YYYY',
             }
 
            ]
        }"></div> <pre data-bind="text: ko.toJSON(listOfPersons, null, 2)"></pre>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <script src="http://docs.handsontable.com/0.23.0/bower_components/handsontable/dist/handsontable.full.js"></script> <link rel="stylesheet" media="screen" href="http://docs.handsontable.com/0.23.0/bower_components/handsontable/dist/handsontable.full.min.css"> <link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css">
<link rel="stylesheet" media="screen" href="https://cdnjs.cloudflare.com/ajax/libs/pikaday/1.4.0/css/pikaday.css">
<style type="text/css"> body {
    background: white;
    margin: 20px;
}
h2 {
    margin: 20px 0;
}

JavaScript

$(document).ready(function () {
     function Person() {
         var self = this;
         self.fname = ko.observable('Bob');
         self.lname = ko.observable('Smith');
         self.date =  ko.observable('');

     }

     function exampleVM() {
         self.listOfPersons = ko.observableArray([]);
         self.listOfPersons.push(new Person());
         self.listOfPersons.push(new Person());
         self.listOfPersons.push(new Person());
     }
     //window.AppVM = new AppViewModel();
     ko.applyBindings(new exampleVM());

 });


(function (factory) {
    if (typeof define === "function" && define.amd) {
        // AMD anonymous module
        define(["knockout", "jquery", "handsontable"], factory);
    } else {
        // No module loader (plain <script> tag) - put directly in global namespace
        factory(window.ko, jQuery, window.handsontable);
    }
})(function (ko, $, undefined) {
    var unwrap = ko.utils.unwrapObservable;

    var peekByString = function (o, s) {
    	if(s)
    		{
		        s = s.replace(/\[(\w+)\]/g, '.$1'); // convert indexes to properties
		        s = s.replace(/^\./, '');           // strip a leading dot
		        var a = s.split('.');
		        while (a.length) {
		            var n = a.shift();
		            if (n in o) {
		                o = o[n];
		            } else {
		                return;
		            }
		        }
		        return o;
    		}
    };
    function setData(key, val, obj) {
        if (!obj) obj = data; //outside (non-recursive) call, use "data" as our base object
        var ka = key.split(/\./); //split the key by the dots
        if (ka.length < 2) {
            obj[ka[0]] = val; //only one part (no dots) in key, just set value
        } else {
            if (!obj[ka[0]]) obj[ka[0]] = {}; //create our "new" base obj if it doesn't exist
            obj = obj[ka.shift()]; //remove the new "base" obj from string array, and hold actual object for recursive call
            setData(ka.join("."),...