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();
  }

Answer 2

My problem was in this section:

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

I had following code:

this.chart.listen('rowSelect', () => {
      this.clickedDetail(event);
    });

as soon as I changed it to following it worked:

this.chart.listen('rowSelect', (event) => {
      this.clickedDetail(event);
    });

Before I had hold of the MouseClickEvent itself and not the emitted event of the chart. Thanks for the example it helped a lot.

Just one small question though. I noticed you use rowSelect, and I was using rowClick before. Are they very different in behaviour?

Answer 3

Unfortunately, there's a bug in index.d.ts related to chart listeners. In the current version of index.d.ts file the callback function of a chart listener doesn't take as an argument event object. That's why the item and period properties are missing. This issue is already known and our dev team is preparing a fix for it which will be available with the release of 8.2.0 version. We will notify you via this thread when the fix becomes available.

Answer 4

Our team has prepared a dev-preview of 8.2.1 update and you can try it in your projects. This update includes many bug fixes of index.d.ts. To get this update replace in ‘package.json’ the current AnyChart dependence with the following "anychart": "8.2.1-rc.0" Or you can download it manually via NPM: $ npm install anychart@8.2.1-rc.0

In this update, you can get access to 'event' object in a listener.

this.chart.listen('rowSelect', function(event) {
    event.preventDefault();
});

Very soon our team will provide public release of 8.2.1 update.