Wijmo 5 [ Flex Grid ]

Item formatter with custom variable

HTML

<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.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.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
        
        <wj-flex-grid items-source="data" format-item="formatItem(s,e,['red','blue'])">
            <wj-flex-grid-column header="Name" binding="name"></wj-flex-grid-column>
            <wj-flex-grid-column header="count" binding="count"></wj-flex-grid-column>
            <wj-flex-grid-column header="PIN" binding="pin" allow-sorting="false"></wj-flex-grid-column>
        </wj-flex-grid>
        
    </div>

JavaScript

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

        // controller
        app.controller('appCtrl', function ($scope) {
            // create some data            
            $scope.data = new wijmo.collections.CollectionView(getData());
            $scope.formatItem = function (s, e, customVar) {
                console.log(e.row);
                if (e.panel.cellType == wijmo.grid.CellType.Cell) {
                    var col = e.panel.columns[e.col];                    
                        e.cell.style.color = customVar[e.col];                    
                }
                
                e.cell.innerHTML = '<span>aaaa</span>';
            };
        });
     

        // function used to get data for the grid
        function getData() {
            var names = 'Taylor,Martin,Guild,Gibson,Fender'.split(','),
                data = [];
            for (var i = 0; i < 10; i++) {
                data.push({
                    id:i,
                    pin: i % 3 == 0 && i < 20,
                    count: Math.round(Math.random() * 1000),
                    name:names[i%names.length]
                });
            }
            return data;
        }