How to export drill-through data as PDF, Excel, and CSV formats in an Angular Pivot Table?

4 mins read

Introduction

When working with Angular Pivot Table, there may be occasions where you require the flexibility to export drill-through data into different file formats, such as PDF, Excel, and CSV. This can be essential for further data analysis or record-keeping purposes. This article explains how you can seamlessly export drill-through data into the aforementioned file formats.

Exporting the drill-through data

In order to export drill-through data, you will need to use the beginDrillThrough event of the pivot table. This event is triggered just before the drill-through dialog appears. By default, the drill-through data is displayed using the Syncfusion Grid Component. By handling this event, you can access the instance of the Grid component and invoke the appropriate export methods. Below is an example of a code snippet that demonstrates how to achieve this:

[app.component.html]

<ejs-pivotview #pivotview id='PivotView' allowDrillThrough="true" (beginDrillThrough)="beginDrillThrough($event)">
</ejs-pivotview>

[app.component.ts]

import { PivotView, DrillThroughService, BeginDrillThroughEventArgs, } from '@syncfusion/ej2-pivotview';
import { Grid, Toolbar } from '@syncfusion/ej2-angular-grids';
import { ClickEventArgs } from '@syncfusion/ej2-navigations';

@Component({
  selector: 'app-root',
  templateUrl: 'app.component.html',
  providers: [FieldListService, DrillThroughService],
})

export class AppComponent {
    
    @ViewChild('pivotview')
    public pivotObj?: PivotView;
    
      beginDrillThrough(args: BeginDrillThroughEventArgs) {
        if (args.gridObj) {
          Grid.Inject(Toolbar); // Injecting the Toolbar module into the Grid component
          let gridObj: Grid = args.gridObj;
          gridObj.toolbar = ['ExcelExport', 'CsvExport', 'PdfExport']; // Adding export options to the toolbar.
          gridObj.allowExcelExport = true, // Enabling Excel and CSV export.
          gridObj.allowPdfExport = true, // Enabling PDF export export.
            (gridObj.toolbarClick = (args: ClickEventArgs) => {
              switch(args.item.id) {
                case this.pivotObj.element.id + '_drillthroughgrid_pdfexport':
                  gridObj.pdfExport(); // Here, we export the drill-through grid as a PDF file format.
                  break;
                case this.pivotObj.element.id + '_drillthroughgrid_excelexport':
                  gridObj.excelExport(); // Here, we export the drill-through grid in Excel file format.
                  break;
                case this.pivotObj.element.id + '_drillthroughgrid_csvexport':
                  gridObj.csvExport(); // Here, we export the drill-through grid in CSV file format.
                  break;
              }
            });
        }
      }

Explanation of the code snippet:

First, we inject the Toolbar module into the Grid component. This module is essential for adding toolbar items that will be used for the exporting process. Then, we define a variable named gridObj to access the instance of the Grid component.
Following this, we configure toolbar items for exporting by using the gridObj.toolbar property. This action allows you to select the desired export format directly from the UI.
Afterwards, we enabled the PDF, Excel, and CSV exports by setting gridObj.allowExcelExport and gridObj.allowPdfExport to true, respectively.
As a final step, we use the gridObj.toolbarClick event. This event is triggered whenever a toolbar item is clicked. Within this event, we check the ID of the clicked toolbar item. If the ID corresponds with either PDF, Excel, or CSV exports, we invoke the respective gridObj.pdfExport(), gridObj.excelExport(), or gridObj.csvExport() method. Each of these methods is designed to export the drill-through data in the chosen file format.

The following screenshot portrays the results of the code snippet mentioned above.

screenshots

Toolbar Items were added to the drill-through grid,

PDF Export,

Excel Export,

CSV Export,

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 effectively implement the functionality to export the drill-through data to PDF, Excel, and CSV formats.

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!

Did you find this information helpful?

Yes

Comments (0)