Unbound TreeGrid

If you prefer to work in unbound mode, you can still build trees by adding rows and columns in code.

Start with a datasource in an array. Initialize the FlexGrid, but don't bind it to the array.

import * as wjGrid from '@mescius/wijmo.grid';

	// workers tree data (heterogeneous collection)
  var workers = [{
    name: 'Jack Smith',
    checks: [{
      name: 'check1',
      earnings: [
      	{ name: 'hourly', hours: 30.0, rate: 15.0 },
        { name: 'overtime', hours: 10.0, rate: 20.0 },
        { name: 'bonus', hours: 5.0, rate: 30.0}
      ]
    }, {
      name: 'check2',
      earnings: [
      	{ name: 'hourly', hours: 20.0, rate: 18.0 },
        { name: 'overtime', hours: 20.0, rate: 24.0 }
      ]
    }]
  }];

  // unbound workers tree
  var uwt = new wjGrid.FlexGrid('#workersGrid', {
  	headersVisibility: 'Column',
    selectionMode: 'Row',
    beginningEdit: function(s, e) {
    	var value = e.panel.getCellData(e.row, e.col);
      if (value == null) {
      	e.cancel = true; // can't edit!
      }
    }
  });  

Add columns and define properties.

// unbound workers tree
var uwt = new wjGrid.FlexGrid('#workersGrid', {
  headersVisibility: 'Column',
  selectionMode: 'Row',
  beginningEdit: function(s, e) {
  	var value = e.panel.getCellData(e.row, e.col);
    if (value == null) {
    	e.cancel = true; // can't edit!
    }
  }
});

Loop through the array and add group rows and cells.

  // add rows
for (var w = 0; w < workers.length; w++) {
  // add worker
  var worker = workers[w];
  var row = new wjGrid.GroupRow(worker);
  row.isReadOnly = false;
  row.level = 0;
  uwt.rows.push(row);
  uwt.setCellData(row.index, 0, worker.name);
  for (var c = 0; c < worker.checks.length; c++) {
      // add check
      var check = worker.checks[c];
      row = new wjGrid.GroupRow(check);
          row.isReadOnly = false;
      row.level = 1;
      uwt.rows.push(row);
      uwt.setCellData(row.index, 0, check.name);
      for (var e = 0; e < check.earnings.length; e++) {
          // add earning
          var earning = check.earnings[e];
          row = new wjGrid.GroupRow(earning);
              row.isReadOnly = false;
          row.level = 2;
          uwt.rows.push(row);
          uwt.setCellData(row.index, 0, earning.name);
          uwt.setCellData(row.index, 1, earning.hours);
          uwt.setCellData(row.index, 2, earning.rate);
      }
  }
}