Wijmo 5 [Flex Grid ]

Import data from excel to flex grid

by Farhat Ullah

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.exportExcel=function(){
var flexGrid = $scope.flex;
            flexGrid.columnHeaders.rows.push(new wijmo.grid.Row());
            flexGrid.columnHeaders.rows.push(new wijmo.grid.Row());
            
            flexGrid.columnHeaders.setCellData(1, 0, "Price");
            flexGrid.columnHeaders.setCellData(1, 1, "123");
            flexGrid.columnHeaders.setCellData(1, 2, "123");
            flexGrid.columnHeaders.setCellData(1, 3, "123");
            flexGrid.columnHeaders.setCellData(1, 4, "123");
            // 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";
             	}      
            }
        }
    }