Update datasource with Angular

Answered

Hi,
I’m using Angular, but I can’t update datasource after submit
In angular,  the updateData function doesn’t exist
 

@ViewChild(‘pivot’)
publicpivot:FlexmonsterPivot;

 

 

onSubmit() {
this.inspeccionesService.getSeguimientoInspecciones(this.formModel.anyo).subscribe( data=> {
this.dsData=data;
//this.dsData = [{mes: “10. Octubre”, empresa: “Ullastres”, total: 1, gravedad: null}];
this.pivot.updateData({ data:this.dsData});
}, error => console.error(error));
}

 
Thanks

6 answers

Public
Ian Sadovy Flexmonster November 29, 2018

Hello Manolo,
Thank you for the question.
Please note that FlexmonsterPivot is an Angular component wrapper for Flexmonster and all the API is available via flexmonster property. So, please try the following:

this.pivot.flexmonster.updateData({ data:this.dsData });

Please let me know if it helps.
 
Regards,
Ian

Public
Manolo November 29, 2018

Hi,
Thanks for your answer, but now I get an error when I use this.pivot.flexmonster.updateData({ data: this.dsData});
Error: macroTask ‘requestAnimationFrame’: can not transition to ‘running’, expecting state ‘scheduled’, was ‘notScheduled’.
If I want update the datasource I need pass al report config
html

<fm-pivot #pivot
[licenseKey]=”‘XXXX.XXXXX-XXXX”
[report]=’pivotReport’>
</fm-pivot>

typescript

public dsData = [];
 

public pivotReport = {
dataSource: {
dataSourceType:’json’,
data:this.dsData
},
slice: {
reportFilters: [
],
rows: [
{ uniqueName: ’empresa’ },
],
columns: [
{ uniqueName: ‘mes’ },
],
measures: [
{ uniqueName: ‘total’, aggregation: ‘sum’ },
{ uniqueName: ‘conDefectos’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosMuyGraves’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosGraves’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosLeves’, aggregation: ‘sum’ },
]
}
};

 

onSubmit() {
this.inspeccionesService.getSeguimientoInspecciones(this.formModel.anyo).subscribe( data=> {
this.dsData=data;

this.pivotReport= {
dataSource: {
dataSourceType:’json’,
data:this.dsData
},
slice: {
reportFilters: [
],
rows: [
{ uniqueName: ’empresa’ },
],
columns: [
{ uniqueName: ‘mes’ },
],
measures: [
{ uniqueName: ‘total’, aggregation: ‘sum’ },
{ uniqueName: ‘conDefectos’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosMuyGraves’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosGraves’, aggregation: ‘sum’ },
{ uniqueName: ‘defectosLeves’, aggregation: ‘sum’ },
]
}
};

this.pivot.flexmonster.setReport(this.pivotReport); // Works
this.pivot.flexmonster.updateData({ data:this.dsData}); // No works
}, error => console.error(error));
}

How can I update only the datasource?
 
 
 

Public
Ian Sadovy Flexmonster November 29, 2018

Manolo,
Thank you for the details.
Honestly saying, it’s a very strange exception. Could you please verify that the data response comes in the expected format and with the same data structure?
Also, you can use the following code, it will only update the data and keep the selected fields:

var report = this.pivot.flexmonster.getReport();
report.dataSource.data = data;
this.pivot.flexmonster.setReport(report);

Hope it helps.
Regards,
Ian

Public
Manolo November 29, 2018

Hi,
I attach an example with the problem
NOT WORKS

this.pivot.flexmonster.updateData({ data: this.dsData});

 
WORKS

this.pivot.flexmonster.setReport(this.pivotReport);

 
 
 
 
 

Attachments:
pivotgrid.zip

Public
Ian Sadovy Flexmonster November 29, 2018

Thank you for the sample.
 
Seems I’ve understood your problem. You expect that after updateData() the slice from pivotReport will be applied (http://take.ms/YNnvQ). But instead, it shows something different (http://take.ms/6pQgy).
Let me explain a bit why it is happening. When you initially set pivotReport, dsData is empty. That’s why the report is not applied. Therefore, when you use updateData(), it generates a default slice with one row and one measure.
So, as a solution, you need to use setReport() to set the pivotReport (with NOT empty data) for the first time, and for further data updates you can use updateData().
 
I hope it’s clear now.
 
(BTW, I haven’t managed to reproduce the issue with an exception)
 
Regards,
Ian

Public
Manolo November 30, 2018

Ok,
 
Thanks!

Please login or Register to Submit Answer