How to call Parent Scope function inside OnRefresh callback

[karthikvt]

I'm working on pivot table in Angular 5. I have a class named PivotTableComponent, I've defined pivotUI in one of the method in that class.

Couldn't call class function inside onRefresh callback function
`export class PivotTableComponent {
private rowArray = [];
private exclusionKPI = [];
createQuery(dimentions, kpi) {

}
loadData() {
$('#pivotTable').pivotUI(data,
{
rows: this.rowArray,
cols: ["KPI"], vals: ["Value"],
renderers: renderers,
aggregatorName: "Sum",
rendererName: "Table",
hiddenFromDragDrop: ["Value"],
exclusions: {
"KPI": this.exclusionKPI
},
onRefresh: function (data) {
this.rowArray = data.rows;
this.exclusionKPI = data.exclusions.KPI;
this.createQuery(data.rows, data.inclusions.KPI) // here, it throws error createQuery is not a function
}
});
}
}`

[nicolaskruchten]

That's because your onRefresh function isn't bound to this, so this.createQuery isn't defined.

[karthikvt]

I tried like this

‘onRefresh: this.refreshData(data);’ it never triggers that function. How we can do this ? Any suggestion ?

Thanks

[nicolaskruchten]

You'll need to create your callback function with a name, then bind it to the this object, then pass it in as the onRefresh parameter. Here's a bit of documentation about binding: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_objects/Function/bind

[nicolaskruchten]

Basically you'll have to do onRefresh: this.refreshData.bind(this)

[karthikvt]

Thank you so much. It's working.