Wijmo 5 - Multi-map Binding

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/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/interop/angular/wijmo.angular.min.js"></script>
<script src="http://cdn.wijmo.com/5.20143.39/controls/wijmo.input.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">
    
<h1>Multi-Map Binding</h1>

    <p>
        This grid has two columns bound to the same property (countryID), but using different data maps.</p>
    <p>
        The columns may be edited and sorted independently.</p>
    <wj-flex-grid 
        items-source="data"
        selection-mode="Row"
        sorting-column="sortingCol(s,e)">
        <wj-flex-grid-column 
            header="Country Name"
            binding="countryId"
            data-map="countryNameMap">
        </wj-flex-grid-column>
        <wj-flex-grid-column 
            header="Country Code"
            binding="countryId"
            data-map="countryCodeMap">
        </wj-flex-grid-column>
        <wj-flex-grid-column
            header="Action"
            binding="actionId"
            data-map="actionsMap">
        </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) {

    // create some random data
    var countries = [
        {id: 1, name: "Canada", code: "CA"},
        {id: 2, name: "United States", code: "US"},
        {id: 3, name: "Cayman Islands", code: "KY"},
        {id: 4, name: "Denmark", code: "DK"}
                    ];
        actions = [{id: 1, name: 'Invite'},
                   {id:2, name: 'Finalize'},
                   {id:3, name: 'Withdraw'}],
        data = [];
  for (var i = 0; i < countries.length; i++) {
      data.push({                    
          countryId: countries[i % countries.length].id,
          actionId: actions[i % actions.length].id
      });
  }

    // expose data as a CollectionView to get events
  $scope.data = new wijmo.collections.CollectionView(data);
  $scope.actionsMap = new wijmo.grid.DataMap(actions, "id", "name");
  $scope.countryNameMap = new wijmo.grid.DataMap(countries, "id", "name");
  $scope.countryCodeMap = new wijmo.grid.DataMap(countries, "id", "code");
    
    // use current column's dataMap when sorting
    $scope.sortingCol = function(s,e) {
        var col = s.columns[e.col];
        if (col.dataMap) {
            s.collectionView.sortConverter = function(sd, item, value) {
                if (sd.property == col.binding) {
                    value = col.dataMap.getDisplayValue(value);
                }
                return value;
            }
        } else {
            s.collectionView.sortConverter = null;
        }
    }
});