Wijmo 5 [Flex Grid]

Json data formatting in flex grid

by Joel Parks

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.20162.188/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20161.151/controls/wijmo.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/interop/angular/wijmo.angular.min.js"></script>
 <div ng-app="app" ng-controller="appCtrl">
      
       <wj-flex-grid items-source="data" control="flex">
           <wj-flex-grid-filter></wj-flex-grid-filter>
           <wj-flex-grid-column header="Country" binding="country" data-type="String" width="*"></wj-flex-grid-column>
           <wj-flex-grid-column header="Downloads" binding="downloads" data-type="Number" width="*" format="n2"></wj-flex-grid-column>
           <wj-flex-grid-column header="Sales" binding="sales" data-type="Number" width="*" format="n2"></wj-flex-grid-column>
           <wj-flex-grid-column header="date" binding="date" data-type="Date" width="*" format="MMM/dd/yyyy"></wj-flex-grid-column>
       </wj-flex-grid>
    </div>

JavaScript

var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
            data = [{
							'CountryCode': '03924093',
             	'CountryName': 'US'
         		}, {
             	'CountryCode': '03984541',
             	'CountryName': 'UK'
         		}, {
             	'CountryCode': '10576965',
             	'CountryName': 'Japan'
         		}, {
             'CountryCode': '03855858',
             'CountryName': 'India'
         }, {
             'CountryCode': '10576971',
             'CountryName': 'China'
         }];

            var app = angular.module('app', ['wj']);
            app.controller('appCtrl', function ($scope,$filter) {
                // fromat json data to desire data types
                angular.forEach(data, function (value, key) {                
                    value.downloads = Number(value.downloads);
                    value.sales = Number(value.sales);
										//change json date to date object
                    value.date = new Date(value.date);
                });
                $scope.data = new wijmo.collections.CollectionView(data);               
            });