Page event not firing in google.visualization

Question

google.visualization.events specifies that there is a page event according to https://developers.google.com/chart/interactive/docs/gallery/table?hl=ja#Events

I am trying to use that and could not get that quite right. Here is what I am trying

this.tableViz_ = new google.visualization.ChartWrapper({
    'chartType': 'Table',
    'containerId': 'xyz',
    'options': {
      'allowHtml': true,
      'cssClassNames': {
        headerRow: 'header-row'
      },
      'page': 'enable',
      'pageSize': '100',
      'sortAscending': false,
      'sortColumn': 0
    }
  });

this.vizDashboard_ = new google.visualization.Dashboard(
      document.getElementById('xyz'));

and I am adding listeners after this with

  this.vizDashboard_.draw(data);
  google.visualization.events.addListener(this.tableViz_, 'select',
      goog.bind(this.test1, this));
  google.visualization.events.addListener(this.tableViz_, 'ready',
      goog.bind(this.test2, this));
  google.visualization.events.addListener(this.tableViz_, 'page',
      goog.bind(this.test3, this));

Both select and ready are working fine, but when I navigate to different page on table it is not triggering the event. What am I missing here? FYI, the google.visualization API we are using is 1.1

Answer 1

The ChartWrapper does not listen for the "page" event on the Table visualization it wraps, so you have to set up the handler directly on the Table:

google.visualization.events.addListener(this.tableViz_, 'ready', function () {
    google.visualization.events.addListener(this.tableViz_.getChart(), 'page', goog.bind(this.test3, this));
});