Wijmo - OLAP PivotGrid

sorting individual columns

by Joel Parks

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">
  <h1>OLAP Pivot Grid</h1>
  <p>To sort on value fields of the PivotEngine, add a <b>SortDescription</b> object to the sortDescription's array array of the PivotEngine's <b>pivotView</b> property.</p>
  <div><pre><code>var mySortDesc = new wijmo.collections.SortDescription(columnBinding, true);<br>pivotEngine.pivotView.sortDescriptions.push(mySortDesc);</code></pre></div><br>
  <button class="btn" ng-click="sortSales()">Sort <b>Sales</b> field</button>
  <button class="btn" ng-click="sortExpenses()">Sort <b>Expenses</b> field</button><br><br>
  
  <wj-pivot-grid
    items-source="ngFmt"
    control="pivotGrid"
    initialized="init()">
  </wj-pivot-grid>
  
</div>

JavaScript

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

// controller
app.controller('appCtrl', function($scope) {
	var ascending = true;
  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
    });
  }
  //$scope.cv = new wijmo.collections.CollectionView(data);
  
  var ng = new wijmo.olap.PivotEngine({
  	autoGenerateFields: false,
    itemsSource: data,
    showColumnTotals: wijmo.olap.ShowTotals.GrandTotals,
    showRowTotals: wijmo.olap.ShowTotals.Subtotals,
    fields: 'country,product,color,sales,expenses'.split(','),
    rowFields: 'Country,Product'.split(','),
    valueFields: 'Sales,Expenses'.split(','),
    columnFields: ['Color']
    
  });
  ng.fields.getField('Sales').aggregate = 'Sum';
  ng.fields.getField('Expenses').aggregate = 'Sum';
 	$scope.ngFmt = ng;
  ng.fields[0].header = "My Own Countries"; 
  
  // sort Sales column in ascending order on load
  $scope.init = function() {
  
    var sd = $scope.ngFmt.pivotView.sortDescriptions;
	  var binding = $scope.pivotGrid.columns[0].binding; // Sales column
    sd.clear();
    sd.push(new wijmo.collections.SortDescription(binding, ascending));
    ascending = !ascending;
    console.log(sd[0]);
    
  }
  $scope.$watch("pivotGrid",function(){
  var grid=$scope.pivotGrid;
      if(grid){
       /// handle Double click event to Change Detail Grid header
        grid.hostElement.addEventListener("dblclick",function(e){
            var ht= grid.hitTest(e);
            if(ht.cellType==1){
            	updateDetailGridColumn();
            }
        });
        /// handle LostFocus event to Change Detail Grid header
  ...