Wijmo 5 [Flex Grid]

User Multi sort

by Manish Gupta

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
  <div ng-app="app" ng-controller="appCtrl">       
        <div class="grid">
            <wj-flex-grid items-source="data" control="flex" sorted-column="sortedColumn(s,e)" >
                <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
                <wj-flex-grid-column header="Download" binding="downloads"></wj-flex-grid-column>
                <wj-flex-grid-column header="Sale" binding="sales"></wj-flex-grid-column>
                <wj-flex-grid-column header="Expanse" binding="expenses"></wj-flex-grid-column>
            </wj-flex-grid>
        </div>
    </div>

CSS

<style>
  .grid{
            float:left;
            width:85%;
        }
    </style>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
     data = [];
        for (var i = 0; i < 100; i++) {
            data.push({
                country: countries[i%countries.length],
                downloads: Math.round(Math.random() * 20000),
                sales: Math.random() * 10000,
                expenses: Math.random() * 5000
            });
        }
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            var sortedProp = [];
            $scope.sortedColumn = function (s, e) {
                // collecting sort column from user in object
                if (sortedProp.length <= $scope.flex.columns.length) {
                    var isSorted = false;
                    for (var i = 0; i < sortedProp.length; i++) {
                        if (sortedProp[i].col == e.col) {
                            sortedProp[i].sortType = s.columns[e.col].currentSort == '+' ? true : false;
                            isSorted = true;
                        }
                    }
                    if (!isSorted) {
                        sortedProp.push({ col: e.col, binding: s.columns[e.col].binding, sortType: true});
                    }
                }
                // applying user multi sort using collected sort column in object
                $scope.data.sortDescriptions.clear();
                if (sortedProp.length > 0) {
                    for (var i = 0; i < sortedProp.length; i++) {
                        var sortDesc = new wijmo.collections.SortDescription(sortedProp[i].binding, sortedProp[i].sortType);
                        $scope.data.sortDescriptions.push(sortDesc);                  
                    }
                }
            };
        });