Demo - FlexGrid Tabbable Buttons

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.grid.filter.min.js"></script>
<script src="http://cdn.wijmo.com/5.latest/controls/wijmo.gauge.min.js"></script>
<div class="container">

  <h1>
    FlexGrid
  </h1>
  <p>
    Use the Tab key to select buttons, and the space bar to click them:</p>
  <input placeholder="focus">
  <div id="theGrid">
  </div>
</div>

CSS

.wj-flexgrid {
  max-height: 250px;
  margin-bottom: 12px;
}
button {
  font-size: 50%;
  color: black;
}
button:focus {
  outline: 2px solid gold;  
}

JavaScript

onload = function() {

  // create some random data
  var countries = 'US,Germany,UK,Japan,Italy,Greece'.split(','),
    data = [];
  for (var i = 0; i < 200; i++) {
    data.push({
      id: i,
      country: countries[i % countries.length],
      active: i % 5 != 0,
      downloads: Math.round(Math.random() * 200000),
      sales: Math.random() * 100000,
      expenses: Math.random() * 50000
    });
  }

  // default grid
  var theGrid = new wijmo.grid.FlexGrid('#theGrid', {
  	keyActionTab: 'Cycle',
    itemsSource: data,
    formatItem: function(s, e) {
    	if (e.panel == s.cells && e.col == 0) {
          e.cell.innerHTML = '<button tabindex="-1">click me</button>'
      }
    }
  });
  theGrid.columns[0].isReadOnly = true;
  
  theGrid.hostElement.addEventListener('keydown', function(e) {
	  if (e.keyCode == 13 || e.keyCode == 32) {
    	var btn = e.target.querySelector('button');
    	if (btn) {
        btn.click();
				e.preventDefault();
      }
  	}
	}, true);
  
  theGrid.hostElement.addEventListener('click', function(e) {
  	if (e.target.tagName == 'BUTTON') {
    	var ht = new wijmo.grid.HitTestInfo(e.target);
    	alert('thanks for clicking button on row ' + ht.row + ', col ' + ht.col)
    }
  })
}