Wijmo 5[Flex Grid]

Flex grid sample with data mapping

by Manish Gupta

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<div ng-app="app" ng-controller="appCtrl">
        <wj-flex-grid items-source="data" initialized="init(s,e)" style="height:500px;">

        </wj-flex-grid>
    </div>

JavaScript

"use strict";
        function getData(count) {
            var countries = getCountry(),
                products = getProduct(),
                data = [];
            for (var i = 0; i < count; i++) {
                data.push({
                    id: i + 1,
                    country: countries[getRandomInteger(1) % countries.length],
                    product: products[getRandomInteger(1) % products.length],
                    sales: getRandomInteger(3),
                    downloads: getRandomInteger(3),
                    price: getRandom(5)
                })
            }
            return data;
        }

        function getCountry() {
            return 'America,China,Greece,Germany,India,US,UK'.split(',');
        }
        function getProduct() {
            return 'ComponentOne,Wijmo,Xuni,SpreadJS'.split(',');
        }
        function getRandom(length) {
            return Math.random() * Math.pow(10, length);
        }
        function getRandomInteger(length) {
            return Math.floor(getRandom(length));
        }
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(getData(500));
            $scope.init = function (s,e) {
                var columnCountry = s.columns.getColumn('country');                
                columnCountry.dataMap = new wijmo.grid.DataMap(getCountry());
                var columnProduct = s.columns.getColumn('product');
                columnProduct.dataMap = new wijmo.grid.DataMap(getProduct());
            };
        });