Wijmo FlexSheet - custom sort

custom sort on columns containing formula strings using the CollectionView's sortConverter

by Troy Taylor

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/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.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.sheet.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div class="container">
  <div class="col">
  <h1>FlexSheet</h1>
  <h3>
  Formatting Cells
  </h3>
    <p>This FlexSheet demonstrates formatting of a cell range in the FlexSheet. The Sales and Amount columns use the <b>n1</b> format string</p>
  </div>
  <div ng-app="app" ng-controller="appCtrl" style="height:350px">
   <wj-flex-sheet initialized="initialized(s)">
        <wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
        <wj-sheet name="Empty Sheet"></wj-sheet>
    </wj-flex-sheet>
  </div>
</div>

JavaScript

// declare app module
var app = angular.module('app', ['wj']);

// app controller provides data
app.controller('appCtrl', function ($scope, dataService) {
    $scope.ctx = {
        data: dataService.getData(50),
        flexSheet: null
    }
    // initialize the flexSheet control when document ready.
    $scope.initialized = function (s) {
        // select the first sheet 
        s.selectedSheetIndex = 0;
        
        // apply cell styles to range (cells in Sales and Amount column)
        var range = new wijmo.grid.CellRange(0, 2, 52, 3);
        s.applyCellsStyle({ format: "n1"}, [range]);
        
    };
});

angular.module('app').factory('dataService', function () {
	var countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'],
		products = ['Widget', 'Gadget', 'Doohickey'];

	return {
		getData: function (count) {
			var data = new wijmo.collections.ObservableArray(),
				i = 0;

			for (var i = 0; i < count; i++) {

				data.push({
					id: i,
					date: new Date(2014, i % 12, i % 28),
          sales: Math.random() * 10000,
					amount: Math.random() * 10000,
					active: i % 4 === 0
				});
			}
			return data;
		}
	};
});