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>
  <div>
    
  </div>
  <label for="fname">Text search:</label>
  <input type="text" id="fname" name="fname" ng-model="searchName"><br><br>
  <wj-flex-grid 
    class = "Highlighting"
    control = "grid"
    is-read-only="false"
    selection-mode="ListBox"
    initialized="initGrid(s,e)"
    items-source="data">
    <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;
 }
 .customSearch {
  background-color: yellow;
  text-decoration: black;
  color: black;
  border: none;
  font-size: large;
}
 
 .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
}
.Highlighting span {
    background: yellow;
    font-weight: bold;
}

JavaScript

// 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.searchName = "Doohickey";
  $scope.initGrid = function(s,e){
 			 $scope.flexGridControl = s;
      s.autoSizeRows(0,s.rows.length-1,false);
      
      document.querySelector('#fname').addEventListener('input',(e)=>{
      	$scope.grid.refresh();
      })
      s.itemFormatter = (panel, r, c, cell) => {
    if (panel.cellType == wijmo.grid.CellType.Cell) { 
     if ($scope.searchName != '' && cell.innerHTML.includes($scope.searchName) && !$scope.grid.editRange) {     
        let cellText = cell.textContent;
        let hlText = cellText.split($scope.searchName);
        cell.innerHTML = hlText[0] + `<span class="customSearch">${$scope.searchName}</span>` + hlText[1];
     }
    }
  };

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

    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;
  }
});