asked on November 29, 2018
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
⋅ 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
⋅ 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?
⋅ 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
⋅ 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);
⋅ 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
⋅ November 30, 2018
Ok,
Thanks!