Group Header Fromatting

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20142.0/controls/wijmo.chart.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20142.0/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20142.0/interop/angular/wijmo.angular.js"></script>
 <div ng-app="myApp">
        <div ng-controller="appCtrl">
            {{sayHello}}
            <h3>
                Flex Grid using grouping with CollapseGroupsToLevel method for collapsing all data of all group and groupHeaderFromat Property with HTML content.
            </h3>
            <wj-flex-grid items-source="data" group-header-format={{headerFormat}} items-source-changed="sourceChanged(s,e)"></wj-flex-grid>
            Flex Grid using grouping with groupHeaderFormat Property.
            <wj-flex-grid items-source="data" group-header-format={{headerFormat}}></wj-flex-grid>
        </div>
    </div>

CSS

b{
  color:blue;
  text-shadow:0 0 2px red;
}

JavaScript

var app = angular.module('myApp', ['wj']);
 app.controller('appCtrl', function ($scope) {
          
            var countries = 'US,Germany,Netherlands,UK,Japan,Italy,Greece,Belgium,Iceland,Philippines'.split(','),
                          salesareas = 'East,West,North,South'.split(','),
                          data = [];
            for (var i = 0; i < countries.length; i++) {
                for (var j = 0; j < salesareas.length; j++) {
                    data.push({
                        country: countries[i],
                        salesarea: salesareas[j],
                        downloads: Math.round(Math.random() * 20000),
                        sales: Math.random() * 10000,
                        expenses: Math.random() * 5000
                    });
                };
            }
            $scope.data = new wijmo.collections.CollectionView(data);
            var collectionView = $scope.data;
            var groupDescr = new wijmo.collections.PropertyGroupDescription("country");
            collectionView.groupDescriptions.push(groupDescr);
            $scope.headerFormat = 'Group By {name} : <b>{value}</b> contain {count} items';
            $scope.sourceChanged = function (sender, args) {
                sender.collapseGroupsToLevel(0);
            };
        });