Wijmo 5 - Merging and Freezing

by Ross Dederer

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.39/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20143.39/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/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>Merging and Freezing</h1>

    <p>This is a <b>FlexGrid</b> control with merged headers and a frozen column:</p>
    <wj-flex-grid items-source="data" initialized="init(s,e)"></wj-flex-grid>
</div>

CSS

.focused {
    border: 2px solid yellow;
}

JavaScript

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

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

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

        // show a border around the grid when it has the focus
        host.addEventListener('focus', function() {
            wijmo.toggleClass(host, 'focused', flex.containsFocus());
        });
        host.addEventListener('blur', function() {
            wijmo.toggleClass(host, 'focused', flex.containsFocus());
        }, true);
            
        flex.headersVisibility = 'Column';
        flex.allowMerging = 'ColumnHeaders';
            
        var row = new wijmo.grid.Row();
        row.allowMerging = true;
        flex.columnHeaders.rows.insert(0, row);
        for (var i = 1; i <= 6; i++) {
            flex.columnHeaders.setCellData(0, i, i <= 3 ? 'Group 1' : 'Group 2');
        }
            
        flex.frozenColumns = 1;
    }
    
    // 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'
    } ];

});