FlexSheet - Frozen Rows

by Troy Taylor

HTML

<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.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.20162.198/interop/angular/wijmo.angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.detail.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.xlsx.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
  <wj-flex-sheet control="ctx.frozenSheet" initialized="initialized(s)">
        <wj-sheet name="Country" items-source="ctx.data"></wj-sheet>
        <wj-sheet name="Empty Sheet" row-count="30"></wj-sheet>
  </wj-flex-sheet>
  <button type="button" class="btn btn-default" ng-click="freezeCells()">{{ctx.isFrozen ? 'UnFreeze' : 'Freeze'}}</button>
                        
</div>

JavaScript

'use strict';

// 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) {
        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;
        });
    }

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

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

	return {
		getCountries: function () {
			return countries;
		},

		getProducts: function () {
			return products;
		},

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