How to hide specific export options from the export menu in the Angular Pivot Table toolbar?

Introduction

In certain scenarios, you might want to limit the export options available in the pivot table toolbar export menu to ensure that users can only export data in specific file formats. For instance, you may want to enable exporting exclusively for the PDF file format while concealing other options such as CSV and Excel. This approach simplifies the user interface by removing unnecessary options. This article will guide you through the process of hiding specific export options, such as CSV and Excel from the export menu in the Angular Pivot Table toolbar.

Hide specific export options from the menu

To achieve the desired customization, you will need to use the dataBound event of the pivot table. This event is triggered when the pivot table is rendered, providing the opportunity to access the export menu instance from the DOM and apply a condition to hide certain export format options. Here is an example code snippet demonstrating how to accomplish this:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' [dataSourceSettings]=dataSourceSettings allowExcelExport='true' allowPdfExport='true' 
    showToolbar='true' [toolbar]='toolbarOptions' (dataBound)='dataBound($event)'>
</ejs-pivotview>

[app.component.ts]

import { PivotView } from '@syncfusion/ej2-pivotview';

export class AppComponent {
    public pivotObj: PivotView;
    public toolbarOptions: ToolbarItems[];

    @ViewChild('pivotview')
    public pivotObj: PivotView;
    
    dataBound(args: any) {
        let pivotID= this.pivotObj.element.id;
        let exportMenu = select('#' + pivotID + 'export_menu', this.pivotObj.element).ej2_instances[0];
        exportMenu.beforeItemRender = function (args: any) {
            if (args.element.id == pivotID + "csv" || args.element.id == pivotID + "excel") {
              args.element.style.display = "none";
            }
        }
    }
    
    ngOnInit(): void {

        this.toolbarOptions = ['Export'] as ToolbarItems[];
        
    }

Explanation of the code snippet:

First, we obtain the ID of the Pivot Table instance. This ID is then utilized to select the export menu instance from the DOM. Following this, we invoke the select() method with the ID of the pivot table concatenated with _export_menu to precisely target the export menu. Afterwards, we call the beforeItemRender() event of the export menu and apply a condition to check the id of each menu item. If the id corresponds with any of the specified formats (i.e.,CSV or Excel), we set the args.element.style.display property to none. This action effectively conceals the option within the export menu. You can adapt the code to meet your specific requirements, such as hiding various toolbar menu options, like sub-total, grand total, and more.

The following screenshots portray the difference between before and after implementing the above workaround solution:

screenshots

Before implementing the workaround solution,

After implementing the workaround solution,

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

Conclusion

By following the steps outlined in this article and using the provided code examples, you can easily hide specific export options from the export menu in the Angular Pivot Table toolbar.

You can refer to our Angular 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 Angular 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!