Wijmo 5 - AngularJS directives

by L_Nguyen

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.32/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.32/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">

    <h1>Save and Restore State</h1>


    <button id="btnSave" class="btn btn-default">
        Save State
    </button>

    <button id="btnRestore" class="btn btn-default">
        Restore State
    </button>

    <p></p>

    <wj-flex-grid items-source="data" autoGenerateColumns="false" initialized="init(s,e)">
        <wj-flex-grid-column header="" is-read-only="true" allow-merging="false" allow-dragging="false"
            allow-sorting="false" allow-resizing="true" width="150">
            <button class="btn btn-default" ng-click="btnGoClick('Please help me!')">
                BUTTON_GO
            </button>
        </wj-flex-grid-column>

        <wj-flex-grid-column binding="Name" header="Name"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col1" header="Col1"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col2" header="Col2"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col3" header="Col3"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col4" header="Col4"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col5" header="Col5"></wj-flex-grid-column>
        <wj-flex-grid-column binding="Col6" header="Col6"></wj-flex-grid-column>

    </wj-flex-grid>

</div>

JavaScript

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

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

    /* ====================================================== */
    // data
    $scope.data = [{
        Name: 'name1',
        Col1: 'c11',
        Col2: 'c12',
        Col3: 'c13',
        Col4: 'c14',
        Col5: 'c15',
        Col6: 'c16'
    }, {
        Name: 'name2',
        Col1: 'c21',
        Col2: 'c22',
        Col3: 'c23',
        Col4: 'c24',
        Col5: 'c25',
        Col6: 'c26'
    }, {
        Name: 'name3',
        Col1: 'c31',
        Col2: 'c32',
        Col3: 'c33',
        Col4: 'c34',
        Col5: 'c35',
        Col6: 'c36'
    }];

    /* ====================================================== */
    // set up the grid
    $scope.init = function (s, e) {
        var flex = s;
        var host = flex.hostElement;


        flex.allowMerging = 'All';

        /* --- merge header ------------------------------------------------ */
        var row = new wijmo.grid.Row();
        row.allowMerging = true;
        flex.columnHeaders.rows.insert(0, row);
        for (var i = 1; i <= 7; i++) {
            flex.columnHeaders.setCellData(0, i, i <= 3 ? 'Group 1' : 'Group 2');
        }

        flex.frozenColumns = 2;


        /* --------------------------------------------------- */
        // save/restore grid state
        document.getElementById('btnSave').addEventListener('click', function () {
            var state = {
                columns: flex.columnLayout,
                filterDefinition: flex.filterDefinition,
                sortDescriptions: flex.collectionView.sortDescriptions.map(function (sortDesc) {
                    return { property: sortDesc.property, ascending: sortDesc.ascending };
                })
            }
            localStorage['gridState'] = JSON.stringify(state);
        });

        document.getElementById('btnRestore').addEventListener('click', function () {
 ...