Aggregate in Tree View

Aggregate fucnction like Sum can be used by defining as object property

by Manish Gupta

HTML

<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/controls/wijmo.input.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20161.138/styles/wijmo.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.js"></script>
<script src="http://cdn.wijmo.com/5.20161.138/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="myApp">
        <div ng-controller="appCtrl">
            <wj-flex-grid items-source="treeData"
                          child-items-path="country"
                          item-formatter="itemFormatter">
                <wj-flex-grid-column header="Name" binding="name" width="2*"></wj-flex-grid-column>
                <wj-flex-grid-column header="Area" binding="Area" width="*" format="n2" data-type="number">
                </wj-flex-grid-column>

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

JavaScript

var app = angular.module('myApp', ['wj']);
        app.controller('appCtrl', function ($scope) {
            var data =
                [
                    {
                        name: 'Asia',Area:0,                      
                        country: [
                            { name: 'India', Area: 20 },
                            { name: 'Sri Lanka', Area: 30 },
                            { name: 'China', Area: 10 },
                            { name: 'Bhutan', Area: 10 },
                            { name: 'Nepal', Area: 80 }]
                    },
                    {
                        name: 'Europe', Area: 0,
                        country: [
                            { name: 'Denmark', Area: 42925.46 },
                            { name: 'Ireland', Area: 84421 },
                            { name: 'France', Area: 643801 }]
                    }
                ];
         
            $scope.treeData = new wijmo.collections.CollectionView(data);
          
          
            $scope.itemFormatter = function (panel, r, c, cell) {
                var flex = panel.grid;                
                if (panel.cellType == wijmo.grid.CellType.Cell ) {
                    if (cell.firstChild.className == 'wj-glyph-down-right'||cell.firstChild.className == 'wj-glyph-right') {
                       flex.setCellData(r, 1, calculatedArea(panel,r), true);
                    }
                }                
            };
            function calculatedArea(panel, r) {
                var countryList = panel.rows[r].dataItem.country,sum=0;
                for (var i = 0; i < countryList.length; i++) {
                    sum += countryList[i].Area;                    
                }
                return sum;
            }

        });