How to prevent the default report from being saved on initial rendering in Syncfusion's Vue Pivot Table

Introduction

When working with Vue Pivot Table, the saveReport event is typically triggered to store the current state of the report in local storage. This behavior also occurs during the initial rendering of the component—saving the default report named “Sample Report” automatically. However, in certain scenarios, you might want to prevent saving this default report. This article demonstrates how to customize the saveReport event logic to skip saving “Sample Report” on initial load.

Customizing saveReport event to skip default report save

By default, when the Pivot Table initializes with a report, the saveReport event is called to save the report as “Sample Report”. If you wish to prevent this default behavior, you can manually control the logic inside the saveReport event by checking the report name and bypassing the save process if it’s “Sample Report”.

Below is an implementation that demonstrates this approach:

[App.Vue]

<template>
        <ejs-pivotview
          :saveReport="saveReport"
        ></ejs-pivotview>
</template>
     
export default {
  methods: {
    saveReport: function(args: any) {
      let reports = [];
      let isSaved = false;
      if (localStorage.pivotviewReports && localStorage.pivotviewReports !== "") {
          reports = JSON.parse(localStorage.pivotviewReports);
      }
      if (args.report && args.reportName && args.reportName !== '' &&
      args.reportName !== 'Sample Report') {
          reports.map(function (item: any): any {
              if (args.reportName === item.reportName) {
                  item.report = args.report; 
                  isSaved = true;
              }
          });
          if (!isSaved) {
              reports.push(args);
          }
          localStorage.pivotviewReports = JSON.stringify(reports);
      }
    },
  }
}

Explanation

• In the code example above, the saveReport event checks if the report name is not “Sample Report” before saving.
• If it’s a different name, the report is either updated or added to local storage.
• This avoids saving the default report on initial load and only saves reports created by the user.
• The following screenshot, which portrays the results of the code snippet mentioned above,

Screenshot

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

If you do not want to restrict the saving of the default report and instead prefer to load a desired report from the report list as the default in the Vue Pivot Table component, please refer to our official documentation on loading reports.

Conclusion:

I hope you found this article helpful in learning how to prevent the default “Sample Report” from being saved during the initial rendering of the Syncfusion Vue Pivot Table.

You can also refer to our Vue 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 Vue Pivot Table example to understand how to create and manipulate data.

For current customers, you can check out our components from 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!