Handsontable issue #63

by handsoncode

HTML

<script src="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.js"></script>
<link rel="stylesheet" href="https://docs.handsontable.com/pro/1.18.1/bower_components/handsontable-pro/dist/handsontable.full.min.css">
<div>
  <div id="example"/>
  <form id="addRowForm">
    <h4>
      New row:
    </h4>
    <p>
      <label>id: <input name='id'/></label>
    </p>
    <p>
      <input type="submit" value="Add row"/>
    </p>    
  </form>
</div>

JavaScript

var data = [{
	id: "AAA",
  name: "",
  __children:[{
  	id: "AAA.1",
    name: "aaaaaaaa"
  }, {
  	id: "AAA.2",
    name: "bbbbbbbb"
  }]}, {
  id: "BBB",
  name: "",
  __children:[{
  	id: "BBB.1",
    name: "cccccccc"
  }]},
];

var container = document.getElementById('example');
var hot = new Handsontable(container, {
  data: data,
  columns: [{
  	title: 'id',
  	data: 'id'
   }, {
  	title: 'name',
   	data: 'name'
  }],
  rowHeaders: true,
  colHeaders: true,
	nestedRows:true
});

var addRowForm = document.getElementById('addRowForm');

addRowForm.addEventListener("submit",	function(event){
  var id = addRowForm.id.value;
  data.push({
  	id: id,
    __children: []
  });
  hot.loadData(data);
	event.preventDefault();
  hot.render();
});