asked on June 18, 2021
Hi,
We have Integrated Flexmonster with Angular, and after setting data to Flexmonster then webpage responsiveness is decreasing gradually.
Tried without Flexmonster and the page supporting good. We tried setting data to Flexmonster twice then automatically page is lagging so much.
Please suggest any solution how to achieve better performance.
Regards,
Ravi
⋅ June 22, 2021
Hello, Ravi,
Thank you for writing to us.
Could you please provide us with a sample code or project where the issue is reproducible?
This will greatly help us in our investigation.
Looking forward to your response.
Best regards,
Milena
⋅ June 23, 2021
Hi Milena,
Thanks for the reply. Please check the below implemented code from our project.
Please check and provide any solution.
<fm-pivot #flexMonsterGrid [licenseKey]="flexMonsterKeyValue" [report]="fmDataReport" id="fmGrid"
[toolbar]="true" style="border:1px solid;" (beforetoolbarcreated)="fmBeforeToolbarCreated()"
(customizeCell)="fmCustomizeCell()">
</fm-pivot>
fmBeforeToolbarCreated(): void {
// const onThemesIconClick = () => {};
this.setFlexmonsterThemeEvents();
this.flexMonsterGrid.flexmonster = this.createFlexmonsterObject();
// On Clicking any Grid Cell
this.flexMonsterGrid.flexmonster.on(FlexmonsterEvents.cellClick, (cell: any) => {
this.cellClicksReportWise(cell);
});
}
createFlexmonsterObject(): any {
const tempFM = new Flexmonster({
container: 'fmGrid',
licenseKey: this.flexMonsterKeyValue,
toolbar: true,
beforetoolbarcreated: (toolbar: any) => {
const tabs = toolbar.getTabs();
toolbar.getTabs = () => {
// Removing Icons & Customization
delete tabs[0]; // Connect
delete tabs[1]; // Open
delete tabs[2]; // Save
delete tabs[3]; // Export
delete tabs[4]; // Left Icons Divider 1
delete tabs[7]; // Left Icons Divider 2
delete tabs[11]; // Right Icons Divider 1
// tabs.unshift({
// id: 'fm-tab-themes',
// title: 'Themes',
// // handler: onThemesIconClick,
// icon: '<i class="fa fa-th" style="font-size:35px"></i>',
// menu: this.fmThemesList
// });
return tabs;
};
},
height: 620,
width: '100%',
customizeCell: (cell, data) => {
// this.customizeColumnHeaders(cell, data);
ata);
},
global: {
localization: {
grid: {
blankMember: ''
}
}
}
});
return tempFM;
}
fmDataReport =
{
dataSource: {
dataSourceType: 'json',
data: []
// mapping: {}
},
options: {
grid: {
// title: '',
// showFilter: true,
// showHeaders: true,
type: 'flat',
showGrandTotals: false,
showTotals: false,
// grandTotalsPosition: 'top',
// showHierarchies: true,
// showHierarchyCaptions: true,
// drillthroughMaxRows: 1000,
// showReportFiltersArea: true,
// dragging: true,
// showAutoCalculationBar: true
},
configuratorActive: false,
// configuratorButton: true,
// showCalculatedValuesButton: true,
showAggregationLabels: false,
defaultDateType: 'date string',
datePattern: 'dd-MMM-yyyy',
showEmptyValues: false,
// editing: false,
// drillThrough: true,
// showEmptyData: true
},
slice: {
rows: [],
columns: [],
reportFilters: [],
measures: []
},
formats: [
{
thousandsSeparator: '',
// decimalSeparator: '.',
// decimalPlaces: 2,
// currencySymbol: '$',
// positiveCurrencyFormat: '$1',
// nullValue: '',
// textAlign: 'right',
// isPercent: false
}
],
conditions: [],
expandAll: true
};
Regards,
Ravi Kumar
⋅ June 24, 2021
Hi, Ravi,
Thank you for providing the code from your project.
Our team has carefully checked it and found the possible cause of the issue. Please see detailed info below.
In the <fm-pivot> component, the beforetoolbarcreated event is handled by fmBeforeToolbarCreated function. Please note that the beforetoolbarcreated event should be used exclusively for the Toolbar customization. We noticed that the fmBeforeToolbarCreated function is used for other purposes.
Therefore, we suggest:
createFlexmonsterObject() function and the following line of code:
this.flexMonsterGrid.flexmonster = this.createFlexmonsterObject();
In the createFlexmonsterObject function, new instance of Flexmonster is created. When you use Flexmonster integration with Angular, the instance of component is created via <fm-pivot> tag. Thus there is no need to create Flexmonster instance once again.
cellClick outside of fmBeforeToolbarCreated function.
We also prepared some links that can be useful for your case:
beforetoolbarcreated event in Flexmonster & Angular integration: https://github.com/flexmonster/pivot-angular/tree/master/src/app/examples/customizing-toolbarcellClick event.
Please let us know if our answer helped.
Kind regards,
Milena
⋅ July 2, 2021
Hello, Ravi,
Our team is wondering if our suggestion helped.
Looking forward to your reply.
Kind regards,
Illia
⋅ July 5, 2021
Hi Illia,
Thanks for following up.
We didn't get much time to change the existing implementation to your suggested one.
Quite busy with Project deployment and other things.
Definitely will contact you if any help/suggestions required.
Regards,
Ravi