Wijmo 5 - Column Groups

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
  <h1>FlexGrid Column Groups</h1>

    <wj-flex-grid initialized="initFinancial(s,e)" ></wj-flex-grid>
</div>

CSS

.wj-flexgrid {
    max-height: 400px;
}

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {
    $scope.initFinancial = function (s, e) {
        bindColumnGroups(s, fundColumns);
        s.itemsSource = fundData;
        s.resizedColumn.addHandler((s, e) => {
          s.autoSizeRows(0,s.rows.length,true);
        });
       //  if (e.panel == s.columnHeaders) {
         $scope.itemsSourceChanged (s, e);
          //  }
    }
   // make column header cells wrap
    $scope.itemsSourceChanged = function(s, e) {
           
        setTimeout(function() {
            
            // enable wrapping on first header row
            var row = s.columnHeaders.rows[0];
            row.wordWrap = true;

            // autosize first header row
          //  s.autoSizeRow(0, true);
            s.autoSizeRows(0,s.rows.length,true);
            // limit height to 100px
            //if (row.height > 100) {
            //    row.height = 100;
            //}
        });
    }
    // bindColumnGroups method
    function bindColumnGroups(flex, columnGroups) {

        // create the columns
        flex.autoGenerateColumns = false;
        createColumnGroups(flex, columnGroups, 0);

        // merge the headers
        mergeColumnGroups(flex);

        // center-align headers vertically and horizontally
        flex.formatItem.addHandler(function (s, e) {
           
        });

        // select column groups by clicking the merged headers
        flex.allowSorting = false;
        flex.allowDragging = wijmo.grid.AllowDragging.None;
        flex.addEventListener(flex.hostElement, 'click', function (e) {
            var ht = flex.hitTest(e);
            if (ht.panel == flex.columnHeaders) {
                var rng = flex.getMergedRange(flex.columnHeaders, ht.row, ht.col, false) || ht.range;
                flex.select(new wijmo.grid.CellRange(0, rng.col, flex.rows.length - 1, rng.col2));
                e.preventDefault();
   ...