Despite the COVID-19 outbreak, our team continues operating at full speed. We are always here to support and answer all your questions.

Feel free to reach out by filling this quick form.

Fill the form
Get Free Trial

Detect column changes

Re-Open
Abhilash 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

13 answers

Public
Ravi Kumar 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster November 9, 2020

Hello, Ravi,
 
Thank you for sharing the advice on our forum.
 
Best regards,
Illia

Public
Abhilash 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Abhilash 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;
}
Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Attachments:
pivot-angular.zip

Public
Abhilash 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

Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Abhilash 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");
}

Attachments:
pivot-angular.zip

Public
Abhilash 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;
}
Public
Illia Yatsyshyn Illia Yatsyshyn Flexmonster 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

Public
Abhilash November 13, 2020

Thank you this worked :))

Please login or Register to Submit Answer