Prevent Row Scattering using Hierarchical Tree

Hierarchical tree used for preventing jumbled mess

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="values"
                          selection-mode="ListBox"
                          headers-visibility="Column"
                          sorted-column="sortedColumn(s,e)">
               
                <wj-flex-grid-column header="Date" binding="date" width="*" allow-sorting="false"><wj-flex-grid-cell-template cell-type="GroupHeader">{{$item.type}}</wj-flex-grid-cell-template></wj-flex-grid-column>
                <wj-flex-grid-column header="Document" binding="document" width="*" allow-sorting="false"></wj-flex-grid-column>
                <wj-flex-grid-column header="Reference" binding="reference" width="*" allow-sorting="false"></wj-flex-grid-column>
                <wj-flex-grid-column header="Debit Value" binding="debit" format="n2" width="*"></wj-flex-grid-column>
                <wj-flex-grid-column header="Credit Value" binding="credit" format="n2" width="*"></wj-flex-grid-column>
                <wj-flex-grid-column header="Balance" binding="balance" format="n2" width="*"></wj-flex-grid-column>              
               
            </wj-flex-grid>

        </div>
    </div>

JavaScript

var app = angular.module('myapp',['wj']);
        app.controller('appCtrl', function ($scope) {
         
            $scope.treeData = [{ type: 'General Balance', values: [{ credit: 'General Balance', balance: 1752.60 }] },
            {
                type: 'Balance', values: [
                    { document: "CF-Consumidor Final", credit: "Previous Balance", balance: 0.00 },
                    { date: new Date(2016, 02, 24), document: "FT SEREIES1/1", reference: "", debit: 1000.00, credit: 0.00, balance: 1000.00 },
                    { date: new Date(2016, 04, 04), document: "FT SEREIES1/2", reference: "", debit: 137.60, credit: 0.00, balance: 1137.60},
                    { date: new Date(2016, 04, 04), document: "FT SEREIES1/3", reference: "", debit: 615.00, credit: 0.00, balance: 1752.60}
                ]
            },
            { type: 'Final Balance', values: [{ credit: "Final Balance", balance: 1752.60 }] }];
            $scope.sortedColumn = function (s, e) {
                var view = s.collectionView;
                if (view && s.childItemsPath) {
                    for (var i = 0; i < view.items.length; i++) {
                        sortItem(view.items[i], view, s.childItemsPath);
                    }
                    view.refresh();
                }
            }
            function sortItem(item, view, childItemsPath) {
                var children = item[childItemsPath];
                if (children && wijmo.isArray(children)) {
                    children.sort(view._compareItems());
                    for (var i = 0; i < children.length; i++) {
                        sortItem(children[i], view, childItemsPath);
                    }
                }
            }
        });