Demo - Tree Merging

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    Tree Merging
  </h1>
  <p>
    By default, the FlexGrid will not merge cells on Group rows.
    Because trees are made of group rows, merging cells in 
    tree grids requires a custom <b>mergeManager:</b>.</p>
  <div id="theGrid">
  </div>
  
</div>

CSS

.wj-flexgrid {
  max-height: 300px;
}
body {
  margin-bottom: 24px;
}

JavaScript

onload = function() {

	var data = [
  	{ id: 0, name: 'Zipa', nickname: 'Zipa', kids: [
    	{ id: 1, name: 'Uaio', nickname: 'Uaio', kids: [
      	{ id: 4, name: 'Alice', nickname: 'Alice' },
			]},
      { id: 2, name: 'Titi', nickname: 'Titi', kids: [
      	{ id: 5, name: 'Marina', nickname: 'Marina' },
        { id: 6, name: 'Laura', nickname: 'Laura' },
			]},
      { id: 3, name: 'Digo', nickname: 'Digo', kids: [
      	{ id: 7, name: 'Kiko', nickname: 'Kiko' },
			]},
		]}
	];
  
  var flexGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	itemsSource: data,
    childItemsPath: 'kids',
    mergeManager: new wijmo.grid.TreeMergeManager()
	});
}

// TreeMergeManager (transpiled from JavaScript)
var __extends = (this && this.__extends) || (function () {
    var extendStatics = Object.setPrototypeOf ||
        ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
        function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
    return function (d, b) {
        extendStatics(d, b);
        function __() { this.constructor = d; }
        d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
    };
})();
var wijmo;
(function (wijmo) {
    var grid;
    (function (grid) {
        'use strict';
        var TreeMergeManager = /** @class */ (function (_super) {
            __extends(TreeMergeManager, _super);
            function TreeMergeManager() {
                return _super !== null && _super.apply(this, arguments) || this;
            }
            TreeMergeManager.prototype.getMergedRange = function (p, r, c, clip) {
                if (clip === void 0) { clip = true; }
                var rg = new grid.CellRange(r, c);
                for (var i = rg.col; i < p.columns.length - 1; i++) {
                    if (p.getCellData(rg.row, i, true) != p.getCellData(rg.row, i + 1, true))
                        break;
                    rg.col2 = i + 1;
                }
               ...