Get Free Trial

Page Performance Issue when using Flexmonster

Ravi Kumar asked on June 18, 2021

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.

5 answers

Milena Pechura Milena Pechura Flexmonster 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,

Ravi Kumar 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()”

fmBeforeToolbarCreated(): void {
        // const onThemesIconClick = () => {};
        this.flexMonsterGrid.flexmonster = this.createFlexmonsterObject();
        // On Clicking any Grid Cell
        this.flexMonsterGrid.flexmonster.on(FlexmonsterEvents.cellClick, (cell: any) => {

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);
            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

Ravi Kumar

Milena Pechura Milena Pechura Flexmonster 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:

  1. removing the 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.

  2. handling cellClick outside of fmBeforeToolbarCreated function.

We also prepared some links that can be useful for your case:

Please let us know if our answer helped.
Kind regards,

Illia Yatsyshyn Illia Yatsyshyn Flexmonster July 2, 2021

Hello, Ravi,
Our team is wondering if our suggestion helped.
Looking forward to your reply.
Kind regards,

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

Please login or Register to Submit Answer