Wijmo 5 - FlexGrid with Dynamic Context Menu

HTML

<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="http://cdn.wijmo.com/5.latest/styles/wijmo.min.css">
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.input.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.chart.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/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>FlexGrid with Dynamic Context Menu</h1>
  
  <p>
    This fiddle shows one way to customize a context menu to display commands
    applicable to the cell that was clicked on the grid.
  </p>
  <p>
    We attach a handler to the grid's 'contextmenu' event, perform a hit-test,
    and modify the menu content before it is displayed to the user.
  </p>
  <p>
    Try opening the context menu on regular cells and on column header cells
    to see the difference.
  </p>

  <wj-flex-grid
    items-source="data"
    wj-context-menu="#ctxMenu"
    initialized="initGrid(s,e)">
  </wj-flex-grid>

  <wj-menu
    id="ctxMenu"
    ng-hide="true"
    items-source="menuCommands"
    display-member-path="header"
    item-clicked="menuItemClicked(s, e)">
  </wj-menu>

</div>

CSS

.wj-flexgrid {
  max-height: 300px;
}
.wj-dropdown-panel {
  min-width: 200px;
  background: #c0f0c0;
  padding: 12px;
}

JavaScript

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

// controller
app.controller('appCtrl', function($scope) {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < countries.length; i++) {
    data.push({
      country: countries[i],
      downloads: Math.round(Math.random() * 20000),
      sales: Math.random() * 10000,
      expenses: Math.random() * 5000
    });
  }

  // expose data to controller
  $scope.data = data;
  
  $scope.menuCommands = [
  	{ header: 'Custom', context: 3 },
  	{ header: 'Cut', context: 1 },
  	{ header: 'Copy', context: 1 },
  	{ header: 'Paste', context: 1 },
  	{ header: 'Search', context: 2 },
  	{ header: 'Replace', context: 2 },
  ];
  
  // customize the context menu depending on the cell that was clicked
  $scope.initGrid = function(s, e) {
  	var flex = s;
  	flex.addEventListener(flex.hostElement, 'contextmenu', function(e) {
    
    	// customize the menu before showing it
			var ht = flex.hitTest(e),
      	menu = wijmo.Control.getControl(document.getElementById('ctxMenu')),
        items = menu.collectionView.sourceCollection;
        
			// set the text for the first item
			items[0].header = wijmo.format('<b>Cell {row}, {col}</b>', ht);
      
      // apply a filter to show/hide items depending on the cell type
      menu.collectionView.filter = function(item) {
      	switch(ht.cellType) {
        	case wijmo.grid.CellType.Cell:
          	return (item.context & 1) != 0;
        	case wijmo.grid.CellType.ColumnHeader:
          	return (item.context & 2) != 0;
        }
      	return false;
      }
    	
  	}, true); // capture
  }
  
  $scope.menuItemClicked = function(s, e) {
  	var menu = s;
  	alert('thanks for selecting option ' + menu.selectedItem.header);
  }
  
});