How to save and load a report with large data in TypeScript Pivot Table?

Introduction:

Saving and loading a report with a large data source in a TypeScript Pivot Table can lead to performance degradation. It’s essential to improve performance and ensure a smooth user experience when saving and loading such reports. This article will illustrate how to achieve this using coding examples.

Save and load a report with large data in the pivot table

To achieve this, you need to save the report without the data source using the saveReport event. After this, while loading the report, set the current data source from the Pivot Table instance to the loaded report using the loadReport event.

Here’s an example of how to save and load a report with large data in a pivot table:

[index.ts]

import { PivotView, SaveReportArgs, LoadReportArgs } from '@syncfusion/ej2-pivotview';
let pivotObj: PivotView = new PivotView({
    saveReport: function (args: SaveReportArgs): void {
        if (args.report && args.reportName && args.reportName !== '') {
            let report = JSON.parse(args.report);
            // Code to save the report without data source
            report.dataSourceSettings.dataSource = [];
            report.pivotValues = [];
            args.report = JSON.stringify(report);
        }
    },
    loadReport: function (args: LoadReportArgs): void {
        if (args.report) {
            let report = JSON.parse(args.report);
            // Code to load the report with current data source
            report.dataSourceSettings.dataSource = pivotObj.dataSourceSettings.dataSource;
            pivotObj.dataSourceSettings = report.dataSourceSettings;
        }
    }
});

The following steps explain the above code snippet:

1. First, we use the saveReport event to ensure the existence of both the report and the report’s name by using the args.report and args.reportName properties, respectively. If they exist, we parse the report into a JSON object and save it without the data source by setting the report.dataSourceSettings.dataSource property to an empty array. Subsequently, we remove the pivot values in the report by setting the report.pivotValues to an empty array. Finally, we convert the report back to a JSON string using the stringify method and set it as the value of args.report.

2. On the other hand, we used the loadReport event to load the saved report with the current data source. In this event, we parse the saved report into a JSON object and set the current data source from the Pivot Table instance (i.e.,pivotObj) to the loaded report by using the report.dataSourceSettings.dataSource property. Finally, the data source settings of the pivot instance are replaced with the report data source settings. By doing this, the loaded report will display the pivot table with the current data source.

The following GIF image portrays the results of the code snippet mentioned above:

GIF

For a practical demonstration, refer to the sample of stackblitz.

Conclusion:

I hope you enjoyed learning how to save and load a report with large data in Pivot Table).

You can also refer to our TypeScript Pivot Table feature tour page to learn about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications. You can also explore our TypeScript Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components on the License and Downloads page. If you are new to Syncfusion, you can try our 30-day free trial to check out our other controls.

If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, support portal, or feedback portal. We are always happy to assist you!