Prevent Row Scattering

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="data" control="flex">
               
                <wj-flex-grid-column header="Date" binding="date" width="*" allow-sorting="false"></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-column header="type" binding="type" width="0"><wj-flex-grid-cell-template cell-type="GroupHeader" >{{$item.name}}</wj-flex-grid-cell-template></wj-flex-grid-column>
               
            </wj-flex-grid>
        </div>
    </div>

JavaScript

var app = angular.module('myapp',['wj']);
        app.controller('appCtrl', function ($scope) {
            var data = [{ credit: "General Balance", balance: 1752.60 ,type:"General Balance"},
            {},
            { document: "CF-Consumidor Final", credit: "Previous Balance", balance: 0.00, type: "Balance" },
            { date: new Date(2016, 02, 24), document: "FT SEREIES1/1", reference: "", debit: 1000.00, credit: 0.00, balance: 1000.00, type: "Balance" },
            { date: new Date(2016, 04, 04), document: "FT SEREIES1/2", reference: "", debit: 137.60, credit: 0.00, balance: 1137.60, type: "Balance" },
            { date: new Date(2016, 04, 04), document: "FT SEREIES1/3", reference: "", debit: 615.00, credit: 0.00, balance: 1752.60, type: "Balance" },
            { credit: "Final Balance", balance: 1752.60, type: "Final Balance" }];
            $scope.data = new wijmo.collections.CollectionView(data);
            var cv = $scope.data;
            var groupDesc = new wijmo.collections.PropertyGroupDescription("type");
            cv.groupDescriptions.push(groupDesc);
            
        });