asked on November 6, 2020
I want to call a function when user add/remove columns or sort the column. Is there a function to detect those changes in flexmonster?
I don't want to use update function because it's getting triggered whenever the data updates/changes. I just want to detect only if user made any changes to columns
⋅ November 9, 2020
Hi Abhiash,
You can try the reportchange event which triggers for few scenarios.
Please go through the documentation for reporchange.
Regards,
Ravi
⋅ November 9, 2020
Hello, Abhilash,
Thank you for reaching out to us.
Our team would like to confirm that a reportchange event is an appropriate option for your case. It is triggered when a report is changed in the component.
This event will not be triggered after updating the data using the updateData API call.
Please let us know if it works for you.
Feel free to contact us in case any further questions arise.
Regards,
Illia
⋅ November 9, 2020
Hello, Ravi,
Thank you for sharing the advice on our forum.
Best regards,
Illia
⋅ November 9, 2020
Thankyou both. Yeah i tried that. It worked when i update show/hide columns. But when i change the sort order reportchange is not getting triggered. Is there anything to capture that? Ultimately i want to show/hide a reset button when user show/hide columns or change the sorting order or move any columns
⋅ November 10, 2020
Hello, Abhilash,
Thank you for your feedback.
We want to explain that sorting is expected to trigger the reportchange event.
Our team did not manage to reproduce the described behavior on our side.
You are welcome to see the JSFiddle we used for the investigation. It shows an alert every time the reportchange event is triggered.
Please provide us with the steps required to reproduce the issue using this example. Also, you can modify the JSFiddle if needed.
We are looking forward to hearing from you.
Regards,
Illia
⋅ November 10, 2020
Hmm, So i'm using Angular and below is the code. Can you see if i did something wrong?
<fm-pivot #pivot *ngIf="createReportForm.controls['reportType'].value && report" [toolbar]="true" [global]="global" (beforetoolbarcreated)="customizeToolbar($event)" [licenseKey]="licenseKey" [report]="report" (reportchange)="flexmonsterUpdated($event)"></fm-pivot>
flexmonsterUpdated(event) {
this.enableResetReport = true;
}
⋅ November 11, 2020
Hello, Abhilash,
Thank you for providing us with the details.
However, we did not manage to reproduce the described behavior in Angular as well. The reportchange is triggered after sorting as expected.
Please see an Angular project demonstrating the reportchange event in attachments.
If it does not help, please prepare a sample where the issue would be reproducible.
Meanwhile, we want to notice that the $event argument does not need to be passed when using the reportchange function. It is because the reportchange event does not pass any parameters to its handler.
Please let us know if it helps.
Our team is looking forward to hearing from you.
Best regards,
Illia
⋅ November 11, 2020
Thanks for reply. I've ran your zip file and it seems to be working fine. But somehow it's not triggering in my application when i sort it only triggers when i move columns, apply filter, hide columns. But it's fine i guess i'll leave it like that
⋅ November 12, 2020
Hello, Abhilash,
Thank you for your feedback.
Our team suggests ensuring that the latest version of the component is used in your case.
It is because of a similar bug that was fixed with a minor update 2.8.19.
Here is our updating to the latest version tutorial for guidance: https://www.flexmonster.com/doc/updating-to-the-latest-version/.
Please let us know if it works for your case.
Our team is looking forward to you.
Best regards,
Illia
⋅ November 12, 2020
Thank you yes i'm using 2.8.18. May be upgrading will fix the issue. But there is one more bug which i tested in the zip you attached it's not working in 2.8.19 either. it's the exportcomplete function. I've updated the zipfile you sent me with this exportcomplete code and sending you back. Can you please test it and fix it if possible
<fm-pivot [toolbar]="true" [report]="'https://cdn.flexmonster.com/reports/report.json'"
(reportchange)="onReportChange()" (exportcomplete)="exportComplete()">
</fm-pivot>
exportComplete() {
alert("complete");
}
⋅ November 12, 2020
Ok i just updated to 2.8.19. Now reportchange is triggering everytime i set the report using this.pivot.flexmonster.setReport(this.report) lol. It did not trigger in 2.8.18 which is what i was expecting Now it suddenly changed after upgrading to 2.8.19:(
I can share my screen and show you if possible in a quick webex call
<fm-pivot #pivot *ngIf="createReportForm.controls['reportType'].value && report" [toolbar]="true"
[global]="global" (beforetoolbarcreated)="customizeToolbar($event)" [licenseKey]="licenseKey"
[report]="report" (reportchange)="flexmonsterUpdated()" (exportcomplete)="exportComplete()">
flexmonsterUpdated() {
this.enableResetReport = true;
}
resetReport() {
this.pivot.flexmonster.setReport(this.report);
this.enableResetReport = false;
}
⋅ November 13, 2020
Hello, Abhilash,
Thank you for giving us some time.
Concerning the problem with an exportcomplete event.
Thank you for preparing the sample. It helped to reproduce the issue on our side.
Our team will investigate the problem and get back with results ETA Dec 14.
As a temporary workaround, we recommend subscribing to this event after the initialization of the component.
For example:
<fm-pivot [toolbar]="true" [report]="'https://cdn.flexmonster.com/reports/report.json'"
(ready)="onReady()">
</fm-pivot>
onReady() {
this.pivot.flexmonster.on("exportcomplete", () => {
alert("complete");
}
)
As for the reportchange event.
We want to explain that Flexmonster does not reload the data after calling the setReport if the data source endpoint stays the same. It is made for optimization. The rest of the configuration is applied instead. As a result, the reportchange event is triggered.
To avoid this, we suggest using the following approach:
flexmonsterUpdated() {
this.enableResetReport = true;
}
resetReport() {
this.pivot.flexmonster.off("reportchange"); //unsubscribe from the "reportchange" event
this.pivot.flexmonster.on("reportcomplete", () => { //subscribe to the "reportcomplete" event"
this.pivot.flexmonster.off("reportcomplete"); // unsubscribe from the "reportcomplete" event to avoid further executions of the handler
this.pivot.flexmonster.on("reportchange", flexmonsterUpdated()); //subscribe to the "reportchange" event"
});
this.pivot.flexmonster.setReport(this.report); //setReport will trigger the "reportcomplete" event
this.enableResetReport = false;
}
Please let us know if it works for you.
Feel free to contact us in case further questions occur.
Best regards,
Illia
⋅ November 13, 2020
Thank you this worked :))