Exporting Selected Grid Rows while Preserving Data Operations

Updated on Feb 25, 2026

Environment

Product

Progress® Kendo UI for Angular Grid

Description

How can I export selected Grid rows to Excel and PDF while maintaining the current filtering, sorting, and grouping? When rows are selected across multiple pages, I want to export all selected rows with the current data operations applied.

This Knowledge Base article also answers the following questions:

• How to export only selected Grid rows with filtering, sorting, and grouping applied?
• Why do exported selected rows not reflect the Grid's data operations?
• How to export all data with filtering, sorting, and grouping when no rows are selected?

Solution

To export selected rows across pages while preserving the applied data operations, use the kendoGridSelectBy directive to persist selection and the process method to apply the operations during export.

Excel ExportPDF Export

To export selected rows to Excel with data operations preserved:

1. Use the kendoGridSelectBy directive to store the entire dataItem in the selectedKeys collection and preserve selection across pages.

   TS

   public selectedKeys: Product[] = [];
   
   public selectBy = (args: RowArgs) => {
     return args.dataItem;
   };

   HTML

   <kendo-grid
     [kendoGridSelectBy]="selectBy"
     [(selectedKeys)]="selectedKeys"
   >
   </kendo-grid>

2. Create a helper method that determines which data to export (selected rows or all data) and applies the current data operations using the process method.

   TS

   public gridState: State = {
     skip: 0,
     take: 10,
     sort: [],
     group: [],
     filter: undefined
   };
   
   private getProcessedExportData(): Product[] {
     const dataToExport = this.selectedKeys.length > 0 ? this.selectedKeys : products;
     const allDataState = { ...this.gridState, take: products.length };
     return process(dataToExport, allDataState).data;
   }

   To export all pages when there are no selected rows, override the take field passed in the process method and set it to the total number of records in the Grid.

3. Use the fetchData callback to call the helper method and return the processed data.

   TS

   public getExcelData = (): ExcelExportData => {
     return {
       data: this.getProcessedExportData(),
       group: this.gridState.group,
     };
   };

   HTML

   <kendo-grid-excel [fetchData]="getExcelData" fileName="Products.xlsx">
   </kendo-grid-excel>

To export selected rows to PDF with data operations preserved:

1. Use the kendoGridSelectBy directive to store the entire dataItem in the selectedKeys collection and preserve selection across pages.

   TS

   public selectedKeys: Product[] = [];
   
   public selectBy = (args: RowArgs) => {
     return args.dataItem;
   };

   HTML

   <kendo-grid
     [kendoGridSelectBy]="selectBy"
     [(selectedKeys)]="selectedKeys"
   >
   </kendo-grid>

2. Create a helper method that determines which data to export (selected rows or all data) and applies the current data operations using the process method.

   TS

   public gridState: State = {
     skip: 0,
     take: 10,
     sort: [],
     group: [],
     filter: undefined
   };
   
   private getProcessedExportData(): Product[] {
     const dataToExport = this.selectedKeys.length > 0 ? this.selectedKeys : products;
     const allDataState = { ...this.gridState, take: products.length };
     return process(dataToExport, allDataState).data;
   }

   To export all pages when there are no selected rows, override the take field passed in the process method and set it to the total number of records in the Grid.

3. Since the PDF export captures the content that is currently visible on the page, create a second Grid off-screen and bind its data to a getter, which calls the helper method to return the processed data.

   HTML

   <div style="position: fixed; top: 0; left: -10000px; width: 800px;">
     <kendo-grid [data]="pdfExportData" #pdfGrid>
       <kendo-grid-column field="ProductName" title="Product Name"></kendo-grid-column>
       ...
     </kendo-grid>
   </div>

   TS

   public get pdfExportData(): Product[] {
     return this.getProcessedExportData();
   }

4. Use the saveAsPDF method to export the hidden Grid to PDF.

   TS

   @ViewChild('pdfGrid') public pdfGrid!: GridComponent;
   
   public onPdfExport(): void {
     this.pdfGrid.saveAsPDF();
   }

The following example demonstrates the full implementation for both Excel and PDF export.

Change Theme

Theme

Loading ...

See Also

• Export Selected Rows to Excel
• Export Selected Rows to PDF
• Exporting Filtered Data to Excel
• Angular Data Grid Excel Export
• Grid PDF Export
• Grid Selection Basics
• API Reference of the GridComponent