How To Get Data On Change Report In Pivot Table, Within React Component ?

Hello Parameswar,
It seems that your anonymous function does not have this reference in its context.
You can rewrite it with ES6 syntax:

this.webdatarocks.on('reportchange', () => {
  this.webdatarocks.getData({}, function(data) {console.log('D2 ',data)})
});

That should do the trick.
Regards,
WebDataRocks Team

Hello,
Thank you for your response. Please follow the bellow code: 
 

export class Pivot extends React.Component {
  props: Props;
  state: State;
  webdatarocks;

  propTypes: {
    global: React.PropTypes.object,
    width: [React.PropTypes.string, React.PropTypes.number],
    height: [React.PropTypes.string, React.PropTypes.number],
    report: [React.PropTypes.string, React.PropTypes.object],
    toolbar: React.PropTypes.bool,
    customizeCell: React.PropTypes.func,
    cellclick: React.PropTypes.func,
    celldoubleclick: React.PropTypes.func,
    dataerror: React.PropTypes.func,
    datafilecancelled: React.PropTypes.func,
    dataloaded: React.PropTypes.func,
    datachanged: React.PropTypes.func,
    fieldslistclose: React.PropTypes.func,
    fieldslistopen: React.PropTypes.func,
    filteropen: React.PropTypes.func,
    fullscreen: React.PropTypes.func,
    loadingdata: React.PropTypes.func,
    loadinglocalization: React.PropTypes.func,
    loadingreportfile: React.PropTypes.func,
    localizationerror: React.PropTypes.func,
    localizationloaded: React.PropTypes.func,
    openingreportfile: React.PropTypes.func,
    querycomplete: React.PropTypes.func,
    queryerror: React.PropTypes.func,
    ready: React.PropTypes.func,
    reportchange: React.PropTypes.func,
    reportcomplete: React.PropTypes.func,
    reportfilecancelled: React.PropTypes.func,
    reportfileerror: React.PropTypes.func,
    reportfileloaded: React.PropTypes.func,
    runningquery: React.PropTypes.func,
    update: React.PropTypes.func,
    beforetoolbarcreated: React.PropTypes.func
  }

  constructor(props: Props) {
    super(props);
    const initialSettings = props.settings;

    this.state = {
      settings: initialSettings,
      webdatarocks:''
    }
  }

  render() {

    return (
      <div> Pivot </div>
    )
  }

  componentDidMount() {
    var config = {};
    var webdatarocksData= '';
    config.container = ReactDOM.findDOMNode(this);
    this.parseProps(config);
    this.webdatarocks = new window.WebDataRocks(config);

    this.webdatarocks.getData({}, function(data) {
      webdatarocksData= JSON.stringify(data);
      console.log('D1 ',data);
    });

    this.webdatarocks.on('reportchange', function() {
        console.log('Hello World..');
    });  
  }

  shouldComponentUpdate() {
    return false;
  }

  componentWillUnmount() {
    this.webdatarocks.dispose();
  }

  parseProps(config: Params) {
    if (this.props.toolbar !== undefined) {
      config.toolbar = this.props.toolbar;
    }
    if (this.props.width !== undefined) {
      config.width = this.props.width;
    }
    if (this.props.height !== undefined) {
      config.height = this.props.height;
    }
    if (this.props.report !== undefined) {
      config.report = this.props.report;
    }
    if (this.props.global !== undefined) {
      config.global = this.props.global;
    }
    if (this.props.customizeCell !== undefined) {
      config.customizeCell = this.props.customizeCell;
    }
    // events
    if (this.props.cellclick !== undefined) {
      config.cellclick = this.props.cellclick;
    }
    if (this.props.celldoubleclick !== undefined) {
      config.celldoubleclick = this.props.celldoubleclick;
    }
    if (this.props.dataerror !== undefined) {
      config.dataerror = this.props.dataerror;
    }
    if (this.props.datafilecancelled !== undefined) {
      config.datafilecancelled = this.props.datafilecancelled;
    }
    if (this.props.dataloaded !== undefined) {
      config.dataloaded = this.props.dataloaded;
    }
    if (this.props.datachanged !== undefined) {
      config.datachanged = this.props.datachanged;
    }
    if (this.props.fieldslistclose !== undefined) {
      config.fieldslistclose = this.props.fieldslistclose;
    }
    if (this.props.fieldslistopen !== undefined) {
      config.fieldslistopen = this.props.fieldslistopen;
    }
    if (this.props.filteropen !== undefined) {
      config.filteropen = this.props.filteropen;
    }
    if (this.props.fullscreen !== undefined) {
      config.fullscreen = this.props.fullscreen;
    }
    if (this.props.loadingdata !== undefined) {
      config.loadingdata = this.props.loadingdata;
    }
    if (this.props.loadinglocalization !== undefined) {
      config.loadinglocalization = this.props.loadinglocalization;
    }
    if (this.props.loadingreportfile !== undefined) {
      config.loadingreportfile = this.props.loadingreportfile;
    }
    if (this.props.localizationerror !== undefined) {
      config.localizationerror = this.props.localizationerror;
    }
    if (this.props.localizationloaded !== undefined) {
      config.localizationloaded = this.props.localizationloaded;
    }
    if (this.props.openingreportfile !== undefined) {
      config.openingreportfile = this.props.openingreportfile;
    }
    if (this.props.querycomplete !== undefined) {
      config.querycomplete = this.props.querycomplete;
    }
    if (this.props.queryerror !== undefined) {
      config.queryerror = this.props.queryerror;
    }
    if (this.props.ready !== undefined) {
      config.ready = this.props.ready;
    }
    if (this.props.reportchange !== undefined) {
      config.reportchange = this.props.reportchange;
    }
    if (this.props.reportcomplete !== undefined) {
      config.reportcomplete = this.props.reportcomplete;
    }
    if (this.props.reportfilecancelled !== undefined) {
      config.reportfilecancelled = this.props.reportfilecancelled;
    }
    if (this.props.reportfileerror !== undefined) {
      config.reportfileerror = this.props.reportfileerror;
    }
    if (this.props.reportfileloaded !== undefined) {
      config.reportfileloaded = this.props.reportfileloaded;
    }
    if (this.props.runningquery !== undefined) {
      config.runningquery = this.props.runningquery;
    }
    if (this.props.update !== undefined) {
      config.update = this.props.update;
    }
    if (this.props.beforetoolbarcreated !== undefined) {
      config.beforetoolbarcreated = this.props.beforetoolbarcreated;
    }
  }

}

But within componentDidMount(), when I used  

this.webdatarocks.on('reportchange', function() {
    console.log('Hello World..');
});

then on change the pivot table, the console log will appear. 
But when I want to get data within reportchange event, then I don’t get any data even will get an console error. The error is bellow: 

Uncaught TypeError: Cannot read property 'getData' of undefined
    at s2m.<anonymous> (PivotTable.jsx:122)
    at s2m.U.dispatch (webdatarocks.js:6)
    at c59.runQuery (webdatarocks.js:6)
    at G7m.runQuery (webdatarocks.js:6)
    at q4j.onDrop (webdatarocks.js:6)
    at Object.onDrop (webdatarocks.js:6)
    at webdatarocks.js:6
    at HTMLDivElement.j4E.T3d.element.(anonymous function).events._Event.isNativeType.__handlers.(anonymous function).(anonymous function) (http://localhost:3000/app/assets/javascripts/webdatarocks.js:6:38839)

For this kind of issue how I’ll solve it ?
 
 
 
 

Hello Parameswar,
 
Thank you for the code sample.
Please note that initialization of the component takes some time, so you need to wait until reportcomplete event before making any API calls:

this.webdatarocks.on('reportcomplete', () => {
  this.webdatarocks.getData({}, function(data) {
    webdatarocksData = JSON.stringify(data);
    console.log('D1 ',data);
  });
});  

Hope it helps.
 
Regards,
WebDataRocks Team

Thank You for your valuable support. 
But I want to get data when on change of pivot table UI within reactjs component. I have added my sample code above. Please take a look. 
So tell me if is there any code sample.
Thank You

Hello Parameswar,
 
Please note, that getData() method also contains updateHandler that is triggered on every change.
So, it seems a suitable solution for you.
 
Regards,
WebDataRocks Team

I am getting this error
“webdatarocks.react.js:27 Uncaught TypeError: window.WebDataRocks is not a constructor”

 this.webdatarocks = new window.WebDataRocks(config);

What do i need to do to solve this ?

Hello Razi,
 
Thank you for the question.
`Uncaught TypeError: window.WebDataRocks is not a constructor` means that webdatarocks.js is not included in the project. Please verify that the file is properly included.
 
Hope it helps.
 
Regards,
WebDataRocks Team