Wijmo 5 - Custom Function

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.20153.117/styles/wijmo.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20153.117/styles/themes/wijmo.theme.office.css">
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.20153.117/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl" class="container">
  <div class="copy">
    <h3>Custom Function</h3> 
    <p>
      FlexSheet allows user to add custom functions by the <b>addCustomFunction</b> method. <br/>
      FlexSheet will parse the cell reference parameter such as 'A1' or 'A1:B2' to a <b>
      <a href="http://wijmo.com/5/docs/topic/wijmo.grid.CellRange.Class.html" target="_blank">CellRange</a></b> instance for the custom function.
    </p>
    <p>
      FlexSheet also allows user to process non-supported functions met in cell expressions by the <b>unknownFuntion</b> event.  This event will pass the 'UnKnownFunctionEventArgs' to customer.<br/>
      This 'UnKnownFunctionEventArgs' provides the function name and the evaluated values list of the parameters. <br />
      Customer can set the 'value' field of 'UnKnownFunctionEventArgs' to customize the miss formula result.
      Otherwise the missed function will return the default error message: <i>'The function "funcName" has not supported in FlexSheet yet.'</i>.
  </p>
  </div>  
  <div>
    <wj-flex-sheet class="flexSheet" initialized="initialized(s)" control="ctx.flexSheet">
      <wj-sheet...

CSS

.flexSheet {
  height: 400px;
  border: 2px solid #e0e0e0;
  margin: 6px;
}

JavaScript

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

// controller
app.controller('appCtrl', function($scope) {
  $scope.ctx = {
    flexSheet: null
  };

	// Initialize the FlexSheet control.
  $scope.initialized = function(flexSheet) {
  	// Add the 'customSumProduct' function in the flexSheet control.
    flexSheet.addCustomFunction('customSumProduct', function(range1, range2) {
      var flexSheet = $scope.ctx.flexSheet,
        result = 0,
        val1, val2;

        for (var rowIndex = 0; rowIndex < range1.rowSpan; rowIndex++) {
          for (var columnIndex = 0; columnIndex < range1.columnSpan; columnIndex++) {
            val1 = +flexSheet.getCellValue(range1.topRow + rowIndex, range1.leftCol + columnIndex, false, flexSheet.sheets[1]);
            val2 = +flexSheet.getCellValue(range2.topRow + rowIndex, range2.leftCol + columnIndex, false, flexSheet.sheets[1]);
            result += val1;
						console.log(flexSheet.sheets[1].grid);
          }
        
      }
      return result;
    }, 'Custom SumProduct Function', true, 2, 2);

		// Add handler for the 'unknownFunction' event to deal with the result for the un-supported function.
    flexSheet.unknownFunction.addHandler(function(sender, e) {
      var result = '';
      if (e.funcName === 'customFunc'){
        if (e.params) {
          for (var i = 0; i < e.params.length; i++) {
            result += e.params[i];
          }
        }
        e.value = result;
      } 
    });

		// Prepare sample data 
    flexSheet.deferUpdate(function() {
      for (var ri = 0; ri < flexSheet.rows.length-1; ri++) {
        for (var ci = 0; ci < 3; ci++) {
          flexSheet.setCellData(ri, ci, ri + ci);
        }
      }
      flexSheet.setCellData(10, 0, '=customSumProduct(A1:A10, B1:B10)');
      flexSheet.setCellData(1, 3, '=customFunc(1, "B", 3)');
    });

  }
})