Wijmo 5 [Flex Grid]

Item formatter execution

by Joel Parks

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.8/angular.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.207/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.207/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.207/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
        <wj-flex-grid items-source="data"
                      style="height:400px;"
                      item-formatter="itemFormatter"
                      control="flex">

        </wj-flex-grid>
    </div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
                data = [];
        for (var i = 0; i < 50; i++) {
            data.push({
                id: i,
                country: countries[i % countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000,
                active:i%4==0
            });
        }

        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            
            $scope.itemFormatter = function (panel, r, c, cell) {

                // highlight rows that have 'active' set
                if (panel.cellType == wijmo.grid.CellType.Cell) {
                    var flex = panel.grid;
                    var row = flex.rows[r];
                    if (row.dataItem.active) {
                        cell.style.backgroundColor = 'gold';
                    }
                }

                // add checkbox to header, sync with checkboxes in column
                if (panel.cellType === wijmo.grid.CellType.ColumnHeader) {
                    var flex = panel.grid;
                    var col = flex.columns[c];
                   // console.log(col);
                    // check that this is a boolean column
                    if (col.dataType == wijmo.DataType.Boolean && col.header == 'Active') {
                       console.log(col) //<---- this is executed twice
                    }
                }
            }
            $scope.$watch('flex', function () {
                var flex = $scope.flex;
                if (flex) {
                    flex.beginningEdit.addHandler(function (s, e) { console.log(e); });
                    flex.cellEditEnded.addHandler(function (s, e) { console.log('Cell Edit End'); });
                    flex.rowEditEnded.addHandler(function (s, e) {...