Header click events

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.chart.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.olap.min.js"></script>
<script src="http://cdn.wijmo.com/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" class="container">


<div id="pivotGrid">

</div>

CSS

// <wj-pivot-grid items-source="ngFmt" control="pivotGrid">
 // </wj-pivot-grid>
//n Number: formatNumber(1234.5, 'n2') => '1,234.50'
//f Fixed-point: formatNumber(1234.5, 'f2') => '1234.50'
//g General (no trailing zeros): formatNumber(1234.5, 'g2') => '1234.5'
//d Decimal (integers): formatNumber(-1234, 'd6') => '-001234'
//x Hexadecimal (integers): formatNumber(1234, 'x6') => '0004d2'
//c Currency: formatNumber(1234, 'c') => '$ 1,234.00'
//p Percent: formatNumber(0.1234, 'p2') => '12.34 %'

JavaScript

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

// controller
app.controller('appCtrl', function($scope) {
  var data = [],
    countries = 'Spain,Russia,Austria,Denmark,Germany'.split(','),
    colors = 'Red,Green,Blue'.split(','),
    products = 'Banana,Apple'.split(',');
  for (var i = 0; i <= 25; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      color: colors[i % colors.length],
      product: products[i % products.length],
      sales: 10 * i + 100,
      expenses: 5 * i + 30,
      profit: i,
      year:2000+i
    });
  }
  $scope.data = new wijmo.collections.CollectionView(data);
  var ng = new wijmo.olap.PivotEngine();
  var a="€"
  ng.autoGenerateFields = false;
  ng.itemsSource = data;
  //ng.showColumnTotals = wijmo.olap.ShowTotals.GrandTotals;
 // ng.showRowTotals = wijmo.olap.ShowTotals.Subtotals;
  ng.fields.push(new wijmo.olap.PivotField(engine=ng,binding='sales',header='Sales', { format:'c' } ));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='country',header='Country'));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='color',header='Color'));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='product',header='Product'));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='expenses',header= 'Expenses',{ format:'c' } ));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='profit',header= '%Profit', { format:'p' } ));
  ng.fields.push(new wijmo.olap.PivotField(engine=ng, binding='year',header= 'Year', { format:'f' } ));
  
  ng.rowFields.push('Country', 'Product','Year');
  //ng.columnFields.push('Color');
  ng.valueFields.push('Sales', 'Expenses','%Profit');
  

 	var pivotGrid = new wijmo.olap.PivotGrid('#pivotGrid', {
    itemsSource: ng
  });
  pivotGrid.addEventListener(pivotGrid.hostElement, 'click', function(e) {
      var ht = pivotGrid.hitTest(e);
      var d=pivotGrid.getKeys(ht.row, ht.col);
      var...