Wijmo - OLAP PivotGrid

sorting individual columns

by George Kamtziridis

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++) {
  
  	let expenses = 30 * i + 100;
    if (i % 2 === 0) {
      expenses = "string";
    }
    
    data.push({
      id: i,
      country: countries[i % countries.length],
      color: colors[i % colors.length],
      product: products[i % products.length],
      sales: 10 * i + 100,
      expenses
    });
  }
  
  var ng = new wijmo.olap.PivotEngine({
  	autoGenerateFields: false,
    itemsSource: data,
    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;
  
  
  // 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]);
  }
  
  // sort Sales column on button click
  $scope.sortSales = 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;
  }
  
  // sort Expenses column on button click
  $scope.sortExpenses = function() {
    var sd = $scope.ngFmt.pivotView.sortDescriptions;
	  var binding = $scope.pivotGrid.columns[1].binding; // Expenses column
    
   ...