Wijmo 5 - FlexGrid Header Filters

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">
    <div class="header">
        <div class="container">
            <h1>
                <span class="glyphicon glyphicon-book"></span>
                Header Filters</h1>
            <p>
                This page shows how to create custom filter cells in a FlexGrid.</p>
        </div>
    </div>
    <div class="container">
        <wj-flex-grid
            control="flex"
            headers-visibility="Column"
            selection-mode="Row"
            items-source="books" 
            allow-dragging="None">
            <wj-flex-grid-column binding="sales" format="n0" width="80"></wj-flex-grid-column>
            <wj-flex-grid-column binding="title" width="200"></wj-flex-grid-column>
            <wj-flex-grid-column binding="author" width="200"></wj-flex-grid-column>
            <wj-flex-grid-column binding="price" format="c" width="120"></wj-flex-grid-column>
            <wj-flex-grid-column binding="instore"></wj-flex-grid-column>
            <wj-flex-grid-column binding="shipping"></wj-flex-grid-column>
            <wj-flex-grid-column binding="bestseller"></wj-flex-grid-column>
            <wj-flex-grid-column binding="pub" width="200" align="center"></wj-flex-grid-column>
       ...

CSS

.wj-flexgrid {
    min-height: 300px;
}

JavaScript

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

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

    // customize FlexGrid control headers
    $scope.flex = null;
    $scope.$watch('flex', function () {
        var flex = $scope.flex;
        if (flex) {

            // enable merging
            flex.allowMerging = wijmo.grid.AllowMerging.ColumnHeaders;

            // add extra column header row
            var row = new wijmo.grid.Row(),
                ch = flex.columnHeaders;

            // initialize header cells
            row.allowMerging = true;
            for (var i = 0; i < flex.columns.length; i++) {
                flex.columns[i].allowMerging = true;
            }
            ch.rows.insert(0, row);
            setHeader(ch, 0, 0, 1, 0, 'Sales');
            setHeader(ch, 0, 1, 0, 2, 'Book');
            setHeader(ch, 0, 3, 0, 3, 'Price');
            setHeader(ch, 1, 3, 1, 3, '');
            setHeader(ch, 0, 4, 0, 5, 'Delivery Terms');
            setHeader(ch, 1, 4, 1, 4, 'In Store');
            setHeader(ch, 1, 5, 1, 5, 'Shipping');
            setHeader(ch, 0, 6, 1, 6, 'Bestseller');
            setHeader(ch, 0, 7, 1, 7, 'Publication Date');
            ch.rows[1].height = ch.rows.defaultSize + 12;

            // enable custom item formatter
            flex.itemFormatter = itemFormatter;

            // create DataMap for 'shipping' column
            var shippingValues = [
                { key: 1, val: '1 hour' },
                { key: 12, val: '12 hours' },
                { key: 24, val: '24 hours' },
                { key: 24, val: '1 day' },
                { key: 48, val: '2 days' },
                { key: 7 * 24, val: '1 week' },
                { key: -1, val: 'pickup' },
                { key: null, val: 'na' }
            ];
            flex.columns.getColumn('shipping').dataMap = new wijmo.grid.DataMap(shippingValues, 'key', 'val');
        }
    });

    // expose book data as...