Insert button (HTML) into Google Visualisation Table Chart

charts, google-visualization, html, javascript, jquery

Solution

Are there ways of catching the events from these buttons, whilst also retrieving the id of the row that is receiving the event? In other words, how do I know which button has been clicked and for which row it represents?

Try this way for example

google.charts.load('current', {'packages':['table']});
google.charts.setOnLoadCallback(drawTable);
function getSelectedRowNumber(table) {
  var selection = table.getSelection();
  var message = '';

  for (var i = 0; i < selection.length; i++) {
    var item = selection[i];
    if (item.row != null && item.column != null) {
      message += '{row:' + item.row + ',column:' + item.column + '}';
    } else if (item.row != null) {
      message += '{row:' + item.row + '}';
    } else if (item.column != null) {
      message += '{column:' + item.column + '}';
    }
  }
  if (message == '') {
    message = 'nothing';
  }
  alert('You selected ' + message); 
}
function drawTable() {
  // Create and populate the data table.
  var data = google.visualization.arrayToDataTable([
    ['Name', 'Height', 'Smokes','test'],
    ['Tong Ning mu', 174, true,'<input type="button" value="test" />'],
    ['Huang Ang fa', 523, false,'<input type="button" value="test" />'],
    ['Teng nu', 86, true,'<input type="button" value="test" />']
  ]);

  // Create and draw the visualization.
  var table = new google.visualization.Table(document.getElementById('table_div'));
  table.draw(data, {
    allowHtml: true,
    showRowNumber: true,
    width: '100%',
    height: '100%',
    cssClassNames: {tableRow: 'myClass'}
  });
  // this works for buttons
  $(document).on('click','input[type=button]',function() {
    getSelectedRowNumber(table);
  });
  // this works for clicking on row uncomment to test it
  /*$(document).on('click','tr.myClass',function() {
    getSelectedRowNumber(table);
  });*/
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.gstatic.com/charts/loader.js"></script>
<div id="table_div"></div>

Problem

Original source