Wijmo 5 - Start with Collapsed Groups

by Joel Parks

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>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Hello Wijmo 5 and AngularJS!</h1>

    <p>This is a <b>FlexGrid</b> control:</p>
    <button onclick="expandAndCollapse()">
    Expand and Collapse
    </button>
    <wj-flex-grid items-source="cvGroup" selection-mode="Row" items-source-changed="sourceChanged(s,e)"></wj-flex-grid>
    
    <div class="btn-group">
        <button type="button" class="btn btn-default" ng-click="cvPaging.moveToFirstPage()" ng-disabled="cvPaging.pageIndex <= 0"> <span class="glyphicon glyphicon-fast-backward"></span>

        </button>
        <button type="button" class="btn btn-default" ng-click="cvPaging.moveToPreviousPage()" ng-disabled="cvPaging.pageIndex <= 0"> <span class="glyphicon glyphicon-step-backward"></span>

        </button>
        <button type="button" class="btn btn-default" disabled="" style="width:100px">{{cvPaging.pageIndex + 1 | number}} / {{cvPaging.pageCount | number}}</button>
        <button type="button" class="btn btn-default" ng-click="cvPaging.moveToNextPage()" ng-disabled="cvPaging.pageIndex >= cvPaging.pageCount - 1"> <span class="glyphicon glyphicon-step-forward"></span>

        </button>
        <button type="button" class="btn btn-default" ng-click="cvPaging.moveToLastPage()"...

JavaScript

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function ($scope) {

    // create some random data
    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.sourceChanged = function(sender, args) {
        sender.collapseGroupsToLevel(0);
    }

    // expose data as a CollectionView to get events
    $scope.cvPaging = new wijmo.collections.CollectionView(data);
    $scope.cvPaging.pageSize = 10;
    $scope.cvGroup = new wijmo.collections.CollectionView(data);
    var cv = $scope.cvGroup;
    var groupDesc = new wijmo.collections.PropertyGroupDescription("country");
    cv.groupDescriptions.push(groupDesc);
    //cv.collapseGroupsToLevel(1);

    $scope.cvGroup.currentChanged.addHandler(function () {
        $scope.$apply('cvGroup.currentItem');
        $scope.cvPaging.refresh();
    });
    
    expandAndCollapse = function() {
    	console.log('Do work');
    }

    $scope.cvPaging.filter = function (item) { // ** filter function
        if (!$scope.cvGroup.currentItem) {
            return true;
        }
        return item.country.indexOf($scope.cvGroup.currentItem.country) > -1;
    };
});