Wijmo 5 - Column Groups

by David Martins

HTML

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

    <p>The grids below have hierarchical column structures where some columns contain groups of columns.</p>
    <p>The column headers use merging to display the structure. Clicking a header cell selects the whole column group.</p>
     <h3>Financial table example</h3>

    <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;
    }

    // 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) {
            if (e.panel == flex.columnHeaders) {
                e.cell.innerHTML = '<div>' + e.cell.innerHTML + '</div>';
				wijmo.setCss(e.cell, {
                	display: 'table',
                    tableLayout: 'fixed'
				});
                wijmo.setCss(e.cell.children[0], {
                    display: 'table-cell',
                    verticalAlign: 'middle',
                    textAlign: 'center'
                });
            }
        });

        // select column groups by clicking the merged headers
        flex.allowSorting = true;
        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();
            }
        });
    }
    function createColumnGroups(flex, columnGroups, level) {

        // prepare to generate columns
        var colHdrs = flex.columnHeaders;

        // add an extra header row if necessary
        if (level >= colHdrs.rows.length) {
            colHdrs.rows.splice(colHdrs.rows.length, 0, new...