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 < 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() {

      $scope.item = {};
      $scope.item.id = "1234";
      $scope.item.country = "aus";
      $scope.item.amount = 123;
      $scope.item.date = "1/1/2012"
      $scope.data.sourceCollection.splice(0, 0, $scope.item);
      $scope.data.refresh();
    }
    $scope.exportExcel = function() {

      $scope.insert();

      var flexGrid = $scope.flex;

      flexGrid.setCellData(0, 1, 'UeS')

      // how can we add new row at the top of table data


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

    };


  });

  function exportFormatItem(args) {
    var p = args.panel,
      row = args.row,
      col = args.col,
      xlsxCell = args.xlsxCell,
      cell, color;

    if (p.cellType === wijmo.grid.CellType.Cell) {
      if (p.columns[col].binding === 'country') {
        if (xlsxCell.value == "Germany") {
          xlsxCell.style.font.color = "red";
        }
      }
    }
  }