Wijmo 5 [Flex Grid]

Flexgrid inside popup with dropdown

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.198/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.198/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
        <button id="thePopup">Show Pop Up</button>
        <wj-popup owner="#thePopup" show-trigger="Click" hide-trigger="None" style="width:600px;height:500px;padding:20px;" modal="true">
            Flex Grid with Data Mapping
            <wj-flex-grid items-source="data" selection-mode="Row" items-source-changed="itemsSourceChanged(s,e)">
                <wj-flex-grid-filter></wj-flex-grid-filter>
                <wj-flex-grid-column header="The List of States" binding="code" data-map="stateMap" word-wrap="true"></wj-flex-grid-column>
                <wj-flex-grid-column header="City" binding="city"></wj-flex-grid-column>
                <wj-flex-grid-column header="Population" binding="pop"></wj-flex-grid-column>
            </wj-flex-grid>
            Flex Grid with combo box
            <wj-flex-grid items-source="dataDropDown">
                <wj-flex-grid-column header="id" binding="id"></wj-flex-grid-column>
                <wj-flex-grid-column header="country" binding="country">
                    <wj-flex-grid-cell-template cell-type="CellEdit"><wj-combo-box items-source="country" selected-value="$value"></wj-combo-box></wj-flex-grid-cell-template>
                </wj-flex-grid-column>
                <wj-flex-grid-column header="date" binding="date"></wj-flex-grid-column>
                <wj-flex-grid-column header="amount" binding="amount"></wj-flex-grid-column>
            </wj-flex-grid>
        </wj-popup>       
    </div>

JavaScript

// sample data
        var state = [{
            name: 'Washington',
            code: 'WA'
        }, {
            name: 'California',
            code: 'CA'
        }, {
            name: 'Oregon',
            code: 'OR'
        }];
        var properties = [{
            code: 'WA',
            isSelected: false,
            isState: false,
            city: 'Seattle',
            pop: 652
        }, {
            code: 'OR',
            isSelected: false,
            isState: false,
            city: 'Portland',
            pop: 609
        }, {
            code: 'CA',
            isSelected: false,
            isState: false,
            city: 'Los Angeles',
            pop: 3884
        }];
        var countries = 'US,Germany,U K,Japan,Italy,Greece'.split(','),
             data = [];
        for (var i = 0; i < 5; 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
            });
        }
        // controller
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(properties);
            $scope.dataDropDown = new wijmo.collections.CollectionView(data);
            $scope.country = countries;
            $scope.stateMap = new wijmo.grid.DataMap(state, "code", "name");
            
            $scope.itemsSourceChanged = function(s, e){
            		setTimeout(function() {
                	
                });
            }
        });