Aggregate in tree view using grouping

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">
            <wj-flex-grid items-source="data"
                         
                          selection-mode="ListBox"
                          headers-visibility="Column"
                          >
                
                <wj-flex-grid-column header="Country" binding="country" width="*"></wj-flex-grid-column>
                <wj-flex-grid-column header="Sales Area" binding="salesarea" width="*" ></wj-flex-grid-column>
                <wj-flex-grid-column header="Downloads" binding="downloads" width="*" aggregate="Sum"></wj-flex-grid-column>
                <wj-flex-grid-column header="Sales" binding="sales" format="n2" width="*" aggregate="Sum"></wj-flex-grid-column>
                <wj-flex-grid-column header="Expenses" binding="expenses" format="n2" width="*" aggregate="Sum"></wj-flex-grid-column>
                

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


        });