Wijmo 5 - FlexGrid dynamic DataMaps

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20173.380/styles/wijmo.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.20173.380/styles/themes/wijmo.theme.material.min.css">
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20173.380/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">

  
  <wj-flex-grid items-source="dataIds" allow-add-new="true" allow-delete="true" selection-mode="Row">
  <wj-flex-grid-filter></wj-flex-grid-filter>
    <wj-flex-grid-column binding="country" header="Country" data-map="countryMap"></wj-flex-grid-column>
    <wj-flex-grid-column binding="city" header="City" data-map="cityMap"></wj-flex-grid-column>
    <wj-flex-grid-column binding="downloads" header="Downloads"></wj-flex-grid-column>
    <wj-flex-grid-column binding="sales" header="Sales"></wj-flex-grid-column>
  </wj-flex-grid>

 
</div>

CSS

.wj-state-selected{
  background-color:orange!important;
}
.wj-state-multi-selected{
  background-color:orange!important;
}

JavaScript

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

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

  // create some random data
  var countries = [
  	{ id: 0, name: 'US' },
    { id: 1, name: 'UK' },
    { id: 2, name: 'Japan' }, ];
  var cities = [
	  { id: 0, name: 'Washington', country: 0 },
    { id: 1, name: 'Miami', country: 0 },
    { id: 2, name: 'Seattle', country: 0 },
    { id: 3, name: 'London', country: 1 },
    { id: 4, name: 'Oxford', country: 1 },
    { id: 5, name: 'Bath', country: 1 },
    { id: 6, name: 'Tokyo', country: 2 },
    { id: 7, name: 'Sendai', country: 2 },
    { id: 8, name: 'Kobe', country: 2}
	];
  function getData(){
    var data=[];
    for (var i = 0; i < cities.length; i++) {
      data.push({
        country: countries[cities[i].country].id,
        city: cities[i].id,
        downloads: Math.round(Math.random() * 20000),
        sales: Math.random() * 10000,
        expenses: Math.random() * 5000
      });
    }
    return data;
  }
  // create data array with country/city ids (numbers)
  $scope.dataIds = new wijmo.collections.CollectionView();
  // simulate HTTP delay
  setTimeout(function(){
  		$scope.dataIds.sourceCollection=getData();      
  },3200);
  
  // create data maps for converting contry/city IDs into strings
  $scope.countryMap = new wijmo.grid.DataMap(countries, 'id', 'name');
  $scope.cityMap = new wijmo.grid.DataMap(cities, 'id', 'name');
  
  // create data array with country/city names (strings)
  $scope.dataNames = [];
  for (var i = 0; i < cities.length; i++) {
    $scope.dataNames.push({
      country: countries[cities[i].country].name,
      city: cities[i].name,
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }
  
  // create data maps for getting lists of country/city names (no real mapping)
  $scope.countryNames = countries.map(function(item) { return item.name; });
...