Handsontable example

by kc11

HTML

<h2>Understanding binding as reference</h2>

<p>Handsontable binds to your data source (array or object) by reference. Therefore, all the data entered in
  the
  grid will alter the original data source.</p>

<p>In complex applications, you may have a purpose to change data source programatically (outside of
  Handsontable). A value change that was done programatically will not be presented on the screen unless you
  refresh the grid on screen using the <b>render</b> method.</p>

<div class="handsontable" id="example1"></div>

<p>
  <button name="dump" data-dump="#example1" data-instance="hot" title="Prints current data source to Firebug/Chrome Dev Tools">
    Dump data to console
  </button>
</p>

CSS

</style><!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ -->

<script src="https://code.jquery.com/jquery-1.11.1.min.js"></script>

<script src="http://handsontable.com/dist/handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="http://handsontable.com/dist/handsontable.full.css">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">
<link rel="stylesheet" media="screen" href="http://handsontable.com/demo/css/samples.css?20140331">

<style type="text/css">
body {background: white; margin: 20px;}
h2 {margin: 20px 0;}

JavaScript

$(document).ready(function () {

  var data = [
    ["year", "Kia", "Nissan", "Toyota", "Honda"],
    ["2008", 10, 11, 12, 13],
    ["2009", 20, 11, 14, 13],
    ["2010", 30, 15, 12, 13]
  ],
    container = document.getElementById('example1'),
    settings1 = {
      data:data
    },
    hot = new Handsontable(container,settings1);
  data[0][1] = "Ford"; //change "Kia" to "Ford" programatically
  hot.render();
  
  function bindDumpButton() {
  
      Handsontable.Dom.addEvent(document.body, 'click', function (e) {
  
        var element = e.target || e.srcElement;
  
        if (element.nodeName == "BUTTON" && element.name == 'dump') {
          var name = element.getAttribute('data-dump');
          var instance = element.getAttribute('data-instance');
          var hot = window[instance];
          console.log('data of ' + name, hot.getData());
        }
      });
    }
  bindDumpButton();

});