Wijmo 5 - AngularJS directives

by tvhaudev

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.min.js"></script>
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.20192.631/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.input.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/controls/wijmo.grid.filter.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.20192.631/interop/angular/wijmo.angular.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl" class="container">
 

  <h1>Hello Wijmo 5 and AngularJS!</h1>
  <p>Click checkboxes to sel rows and then click 'Delete selected rows' to delete rows</p>
  <div>
    
  </div>
  
  <wj-flex-grid 
    control = "grid_aaa"
    is-read-only="false"
    selection-mode="ListBox"
    initialized="initGrid(s)"
    items-source="data">
    <wj-flex-grid-column header="Button" is-read-only="true">
            <button
                class="btn btn-default"
                ng-click="delete($item)">
                    Move
            </button>
            <button
                class="btn btn-default"
                ng-click="add($item)">
                    Show
            </button>
        </wj-flex-grid-column>
    <wj-flex-grid-column header="Country" binding="country"></wj-flex-grid-column>
        <wj-flex-grid-column header="product" binding="product"></wj-flex-grid-column>
        <wj-flex-grid-column header="date" binding="date">
            
        </wj-flex-grid-column>
        
  </wj-flex-grid>
  
</div>

CSS

.wj-flexgrid {
  height: 350px; 
  margin-top:10px;
 }
 
 .wj-marker.draggable-marker{
   cursor: col-resize;
   background-color: red;
   pointer-events: auto;
 }
 
 .error-message {
    padding: 12px;
    color: #c00000;
    background-color: rgba(255, 133, 0, 0.1);
    font-weight: bold;
    border-radius: 0px 0px 14px 14px;
}
 
 /* style our custom 'edit buttons' */
.wj-rowheaders .wj-cell .wj-glyph-pencil {
  opacity: .5;
  transform: scale(.75);
}


.wj-rowheaders .wj-cell:hover .wj-glyph-pencil {
  opacity: 1;
  color: #cc0000;
  transform: scale(1.5) rotate(-90deg);
  transition: all 400ms;
}

.modal-body{
  display: grid;
  grid-template-columns: 50px 150px;
  grid-column-gap: 10px;
  grid-row-gap: 5px;
}

.color-red {
   color: #ff0000
}

JavaScript

var CustomMergeManager = function(grid){
	wijmo.grid.MergeManager.apply(this, arguments);
}
CustomMergeManager.prototype = new wijmo.grid.MergeManager();
CustomMergeManager.prototype.getMergedRange = function(panel, r, c, clip){
	if(panel.cellType == wijmo.grid.CellType.TopLeft){
  	// top-left cells, merge ranges
    var range = new wijmo.grid.CellRange(0, 0, panel.rows.length - 1, panel.columns.length - 1);
    return range;
  }else{
  	// let default handle rest of the cell
    return wijmo.grid.MergeManager.prototype.getMergedRange.apply(this, arguments);
  }
};

// define app, include Wijmo 5 directives
var app = angular.module('app', ['wj']);

// controller
app.controller('appCtrl', function($scope) {
  // expose data as a CollectionView to get events
  $scope.data = new wijmo.collections.CollectionView(getData(50));
  
  $scope.initGrid = function(grid){
      //$scope.clickMe();
      grid.autoSizeRows(0,grid.rows.length-1,false);

  }
  
  function getData(count) {
    var data = [],
      i = 0,
      countryId,
      productId;
    var _products = ['Widget', 'Gadget', 'Doohickey'];
    var _countries = ['US', 'Germany', 'UK', 'Japan', 'Italy', 'Greece'];

    for (var i = 0; i < count; i++) {
      countryId = Math.floor(Math.random() * _countries.length);
      productId = Math.floor(Math.random() * _products.length);
      data.push({
        id: i,
        country: _countries[countryId],
        product: _products[productId],
        date: new Date(2014, i % 12, i % 28)
      });
    }
    return data;
  }
});