AnyChart 8.1 with Angular rowclick event not returning item or period information

Question

I'm creating a POC for a Ganttproject for my company. I'm using the Resource Gantt from Anychart version 8.1.0 in an Angular 5 web project. And I've set up most of the chart finding different documentations and suggestions across the internet, but I got stuck on the click event now. Following the examples from Anychart i found following code to listen to an event on the chart:

chart.listen("rowClick", function(event) {
  var msg = event['item'].get('name');
  if (event['period']) msg += '\nPeriod: ' + event['period']['id'];
  console.log(msg);
});

If we go to the anychart playground we can change this code for the above mentioned snippet:

chart.listen('rowSelect', function(e) {
  e.item.remove();
});

So here we see the event getting the item and period properties. But when I do this in my POC project the item and period properties are missing:

This is the code snippet:

chart: anychart.charts.Gantt;

ngOnInit() {
  this.chart = anychart.ganttResource();
}

ngAfterViewInit() {
this.ganttSvc.getGanttData(this.tokenManager.getUserId()).subscribe((values: 
  GanttDataRow[]) => {
  // set data to grid
  const treedata = anychart.data.tree(values, 'as-table');
  this.chart.data(treedata);
  // add to container and draw
  this.chart.container(this.container.nativeElement).draw();
  // scale
  this.chart.zoomTo('day', 1, 'first-date');
  // eventlisteners
  this.chart.listen('rowSelect', function() {
    event.preventDefault();
    this.clickedDetail(event);
  });
});

clickedDetail(event) {
if (event['period']) {
  this.selectedGanttItem = event['period'];
  this.toggleSideBar();
}

}

Any ideas on what I'm doing wrong?

Answer 1

Please, try the following code, this works with anychart@8.2.1-rc.0 perfectly:

chart: anychart.charts.Gantt = null;
  ngOnInit() {

    const rawData = [
      {
        'name': 'Activities',
        'actualStart': Date.UTC(2007, 0, 25),
        'actualEnd': Date.UTC(2007, 2, 14),
        'children': [
          {
            'name': 'Draft plan',
            'actualStart': Date.UTC(2007, 0, 25),
            'actualEnd': Date.UTC(2007, 1, 3)
          },
          {
            'name': 'Board meeting',
            'actualStart': Date.UTC(2007, 1, 4),
            'actualEnd': Date.UTC(2007, 1, 4)
          },
          {
            'name': 'Research option',
            'actualStart': Date.UTC(2007, 1, 4),
            'actualEnd': Date.UTC(2007, 1, 24)
          },
          {
            'name': 'Final plan',
            'actualStart': Date.UTC(2007, 1, 24),
            'actualEnd': Date.UTC(2007, 2, 14)
          }
        ]
      }];

    const treeData = anychart.data.tree(rawData, 'as-tree');    
    this.chart = anychart.ganttProject();
    this.chart.data(treeData);

    this.chart.listen('rowSelect', function (event) {
      console.log(event['item'].get('name'));
    });

  ngAfterViewInit() {
    this.chart.container(this.container.nativeElement);
    this.chart.draw();
  }