Wijmo 5 [Flex Grid ]

Import data from excel to flex grid

HTML

<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jszip/2.5.0/jszip.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.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/controls/wijmo.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.grid.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/interop/angular/wijmo.angular.min.js"></script>
<script src="http://code.jquery.com/jquery-2.2.4.min.js"></script>
<div ng-app="app" ng-controller="appCtrl" >
        <div class="form-inline well well-lg">          
            <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
            <button class="btn btn-default" ng-click="importExcel()">Load</button>
            <button class="btn btn-default" ng-click="exportExcel()">Export</button>
            
        </div>
       <wj-flex-grid control="flex" items-source="data" auto-generate-columns="false">
           <wj-flex-grid-column header="Country" binding="country"></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>
        
    </div>

JavaScript

var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope,$timeout) {
            var countries = 'US,Germany,U K,Japan,Italy,Greece'.split(','), data = [];
            for (var i = 0; i < 10; 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
                });
            }
            
            $scope.data = new wijmo.collections.CollectionView(data);          
            var oldCvObj, newCvObj;
$scope.exportExcel=function(){
wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.flex, { includeColumnHeaders: true },'Flex.xlsx');

};
            // import
            $scope.importExcel = function () {
                if ($scope.flex) {
                    // importing the file
                    if ($('#importFile')[0].files[0]) {
                        wijmo.grid.xlsx.FlexGridXlsxConverter.load($scope.flex, $('#importFile')[0].files[0], {
                          includeColumnHeaders:true,
                            includeCellStyles: false
                        });
                    }

                 //   updateFlexGridRenderMode();
                    // old data from flex grid
                    oldCvObj = getImportedCVData();
                    console.log(oldCvObj);
                    $timeout(function () {
                        // new data from the flex grid after import when collection view becomes null
                        newCvObj = getImportedCVData();

                        // push new items to the old data array of objects
                        for (var i = 0; i < newCvObj.length; i++) {
                            oldCvObj.push(newCvObj[i]);
                        }
                        
                        // assign the updated collection to the data source used by...