Wijmo 5 [Flex Grid]

Import Excel with validation.

HTML

<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>
<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.grid.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.xlsx.min.js"></script>
<script src="http://cdn.wijmo.com/5.20162.188/controls/wijmo.grid.xlsx.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">
        <div class="form-inline well well-lg">
        <h3>Import Excel with validation.</h3>
        In this sample, importing of excel file is done with validation. If you try to import excel file with another column from flexgrid, it will show error. 
        
            <input type="file" class="form-control" id="importFile" accept="application/vnd.openxmlformats-officedocument.spreadsheetml.sheet, application/vnd.ms-excel.sheet.macroEnabled.12">
            <button class="btn btn-default" ng-click="load()">Load</button>
            <button class="btn btn-default" ng-click="save()">Save</button>
        </div>
        <wj-flex-grid items-source="data" control="flex">
            <wj-flex-grid-column header="ID" binding="id"></wj-flex-grid-column>
            <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 countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
       data = [];
        for (var i = 0; i < 50; 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
            });
        }
        var app = angular.module('app', ['wj']);
        app.controller('appCtrl', function ($scope) {
            $scope.data = new wijmo.collections.CollectionView(data);
            $scope.load = function () {
                
                var importFile = document.getElementById('importFile'),reader, workbook,
                   file = importFile.files[0],
                    flexGrid=$scope.flex;
                if (file) {
                    reader = new FileReader();
                    reader.onload = function (e) {
                        // create workbook instance and load excel file in the workbook
                        workbook = new wijmo.xlsx.Workbook(),
                        workbook.load(reader.result);
                        // access cell of workbook
                        var excelcell = workbook.sheets[0].rows[0];
                        // Column matching
                        
                    };
                    reader.readAsDataURL(file);
                }
            };
            $scope.save = function () {
                wijmo.grid.xlsx.FlexGridXlsxConverter.save($scope.flex, { includeColumnHeaders: true, includeCellStyles: false }, 'FlexGrid.xlsx');
            };
        });