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">
  
  </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 < 2; 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.insert = function() {
//object 1
      $scope.item = new Object();
      $scope.item.id = "1234";
      $scope.item.country = "aus";
      $scope.item.amount = 123;
      $scope.item.date = "1/1/2012";
      //object 2
      $scope.item1 = {};
      $scope.item1.state = "state";
      $scope.item1.serial = 1122;
      $scope.item1.Returndate = "1/1/2013";
      
      //add above these two objects into single object
      //merge $scope.item and $scope.item1 and merged result put into $scope.item
	  Object.assign($scope.item,$scope.item,$scope.item1)
	  
      $scope.data.sourceCollection.splice(0, 0, $scope.item);
      $scope.data.refresh();
    }
    $scope.exportExcel = function() {

      $scope.insert();
	  var newColDef= Object.keys($scope.data.items[0]);
      var flexGrid = $scope.flex;      
	  var colDef= flexGrid.columnLayout;
	  console.log(colDef);
	  for(var i=0;i<newColDef.length;i++){
	  	if(colDef.indexOf(newColDef[i])==-1){
		   console.log(newColDef[i]);
		   flexGrid.columns.push(new wijmo.grid.Column({binding:newColDef[i]}));
		}
	  }
// At the time of export i want to show $scope.item first and then flexGrid on the same sheet of excel. these both collection have different number of rows and columns.

      wijmo.grid.xlsx.FlexGridXlsxConverter.save(flexGrid, {
        includeColumnHeaders: true,
        formatItem: exportFormatItem
      },"flex.xlsx");
	  

    };


  });

  function exportFormatItem(args) {
    var p...