Demo - FlexGrid Right-Clicks

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://cdn.grapecity.com/wijmo/5.latest/styles/wijmo.min.css">
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.grid.min.js"></script>
<script src="https://cdn.grapecity.com/wijmo/5.latest/controls/wijmo.input.min.js"></script>
<div class="container">

  <h1>
    Right-click
  </h1>
  <p>
    Right-click a cell on the grid.
  </p>
  <div id="theGrid"></div>
</div>

JavaScript

onload = function() {

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	childItemsPath: 'children',
    itemsSource: getData()
  });
  theGrid.columns[0].width = '*';
  
  // handle right-click
  theGrid.hostElement.addEventListener('contextmenu', function(e) {
  	var ht = theGrid.hitTest(e);
    if (ht.panel == theGrid.cells) {
    	var item = theGrid.rows[ht.row].dataItem;
      alert('you right-clicked ' + item.name);
    	theGrid.select(ht.row, 0);
      e.preventDefault();
    }
  })
  
  function getData() {
    return [
    	{ name: 'Rachel', children: [
      	{ name: 'Bob' },
      	{ name: 'Paul' }
      ] },
    	{ name: 'Monica', children: [
      	{ name: 'Marcy' },
      	{ name: 'Pearl' }
      ] },
    	{ name: 'Ross', children: [
      	{ name: 'Calvin' },
      	{ name: 'Hobbes' }
      ] },
    	{ name: 'Joey',  children: [
      	{ name: 'Sue' },
      	{ name: 'Marcy' },
      	{ name: 'Zoe' },
      	{ name: 'Mina' }
      ]},
    	{ name: 'Chandler' },
    	{ name: 'Phoebe', children: [
      	{ name: 'Spiff' }
      ] },
    ];
  }
}