FkexSheet Bound

Demo for Flexsheet using Bound data

by Ross Dederer

HTML

<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="cdn.wijmo.com/5.20153.109/styles/wijmo.min.css">
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.grid.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.grid.filter.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.grid.detail.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.grid.sheet.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.grid.xlsx.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.chart.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.input.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.gauge.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/controls/wijmo.xlsx.min.js"></script>
<link rel="stylesheet" href="cdn.wijmo.com/5.20153.109/styles/themes/wijmo.theme.modern.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script src="cdn.wijmo.com/5.20153.109/interop/angular/wijmo.angular.min.js"></script>
    <div ng-controller="basicController">
    <button type="submit" ng-click="addNewColumn()">Add a new Column</button>
    <button class="btn btn-default" type="submit">Add an exisiting Date Column</button>
    <button class="btn btn-default" type="submit">Remove selected Column</button>
    <wj-flex-sheet control="ctx.flexSheet" initialized="initialized(s)" allow-add-new="true" >
           <wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
           <wj-sheet name="Formulas" row-count="310" column-count="6"></wj-sheet>
    </wj-flex-sheet>
    </div>

JavaScript

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

angular.module('app').controller('basicController', function ($scope,dataService) {
  $scope.ctx = {
		data: dataService.getData(50),
		sortManager: null,
		flexSheet: null,
		filterEnable: false,
		columns: [],

	};
  $scope.addNewColumn = function(){
      alert("hi");
  };
  // initialize the flexSheet control when document ready.
$scope.initialized = function (s) {
    for (var i = 0; i < s.sheets.length; i++) {
        s.sheets.selectedIndex = i;
        switch (s.sheets[i].name)
        {
            case 'Country':
                initDataMapForBindingSheet(s);
                break;

            case 'Formulas':
                generateFormulasSheet(s);
                break;
        }
    }
    s.selectedSheetIndex = 0;
};
// initialize the dataMap for the bound sheet.
function initDataMapForBindingSheet(flexSheet) {
  var column;

  if (flexSheet) {
    column = flexSheet.columns.getColumn('countryId');
    if (column && !column.dataMap) {
      column.dataMap = buildDataMap(dataService.getCountries());
    }
  }
};

// build a data map from a string array using the indices as keys
function buildDataMap(items) {
  var map = [];
  for (var i = 0; i < items.length; i++) {
    map.push({ key: i, value: items[i] });
  }
  return new wijmo.grid.DataMap(map, 'key', 'value');
};
// Generate the formulas sheet.
	function generateFormulasSheet(flexSheet)
    {
		setContentForFormulasSheet(flexSheet);

	};
  function setContentForFormulasSheet(flexSheet) {
		flexSheet.setCellData(0, 0, "1. Basic Operators");
		flexSheet.setCellData(1, 1, "1.1. Positive/Negative Numbers");
		flexSheet.setCellData(2, 1, "Input a Positive/Negative number.");
		flexSheet.setCellData(3, 1, "Sample:");
		flexSheet.setCellData(3, 2, "-1");
		flexSheet.setCellData(3, 3, "Result:");
		flexSheet.setCellData(3, 4, "=-1");
};

});

angular.module('app').factory('dataService', function () {
	var countries = ['US', 'Germany', 'UK', 'Japan', 'Italy',...