Wijmo FlexSheet

add a column header row

by Joel Parks

HTML

<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="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div ng-app="app" ng-controller="appCtrl">
  <div class="container">
    <h1>FlexSheet</h1>
    <p>
    
    </p>
    <wj-flex-sheet initialized="initialized(s)" item-formatter="itemFormatter">
      <wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
      <wj-sheet name="Empty Sheet"></wj-sheet>
    </wj-flex-sheet>
  </div>
</div>

CSS

.wj-flexsheet {
    height: 400px;
    background-color: white;
    box-shadow: 4px 4px 10px 0px rgba(50, 50, 50, 0.75);
    margin-bottom: 12px;
}

JavaScript

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

// app controller provides data
app.controller('appCtrl', function ($scope) {
    
    var countries = [ 'US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece' ];
    
    $scope.ctx = {
        data: getData(50),
        flexSheet: null,
        products: [ '0', '1', '2' ],
        countries: [ 'US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece' ],
        //active: i % 2 != 0
    }
   // });
    // initialize the flexSheet control when document ready.
    $scope.initialized = function (s) {
        s.deferUpdate(function () {
            var column;

            for (var i = 0; i < s.sheets.length; i++) {
                s.sheets.selectedIndex = i;
                if (s.sheets[i].name === 'Country') {
                    initDataMapForBindingSheet(s);
                }
            }
            s.selectedSheetIndex = 0;
        });
    };
    $scope.itemFormatter = function(panel, r, c, cell){
    	// 
    }

    // 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(getCountries());
            }
            column = flexSheet.columns.getColumn('productId');
            if (column && !column.dataMap) {
                column.dataMap = buildDataMap(getProducts());
            }
        }
    };

    // 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');
    };
    
    function getData(count) {
    	var data = new wijmo.collections.ObservableArray(),
      		countryId,
          productId;
      
      for (var i=0; i < count;...