Wijmo 5 [Flexsheet]

Flexsheet is used inside a div element

by Manish Gupta

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.3.2/js/bootstrap.min.js"></script>
<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/controls/wijmo.grid.sheet.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app">
        <div ng-controller="appCtrl" style="height:400px;">
            <div style="width:600px;height:400px;margin:10px auto;">
                <wj-flex-sheet selected-sheet-index="0" control="flexSheet">
                    <wj-sheet name="sheet1" items-source="data"></wj-sheet>
                </wj-flex-sheet>
            </div>
        </div>
    </div>

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            var countries = 'US,Germany,U K,Japan,Italy,Greece'.split(','), data = [];
            for (var i = 0; i < 50; i++) {
                data.push({
                    id: i,
                    country: countries[i % countries.length],
                    date: new Date(2014, i % 12, i % 28),
                    amount: Math.random() * 10000,
                    active: i % 4 == 0
                });
            }
            $scope.data = new wijmo.collections.CollectionView(data);
        });