Exporting Filtered Data to Excel File by Using the Angular Data Grid

Environment

Product

Progress® Kendo UI® Data Grid for Angular

Description

How can I export the filtered data to an Excel file by using the Angular Data Grid?

Solution

By default, the Grid exports the current data. To export specific data to Excel:

1. Specify a custom fetchData callback function for the <kendo-grid-excel> component. The fetchData callback returns an ExcelExportData value or an array collection. This is the data exported to the Excel file.

   html

   <kendo-grid-excel ... [fetchData]="filteredData" ></kendo-grid-excel>

2. To export only the filtered data, apply the State of the Grid and return the modified collection.

   ts

   public state: State = {
       filter: {
         logic: 'or',
         filters: [
             { field: 'ProductName', operator: 'contains', value: 'Cha' }
       ]}
   };
   
   public filteredData(): ExcelExportData {
       const result: ExcelExportData = {
           data: process(products, this.state).data,
       };
       return result;
   }

The following example demonstrates how to export only the filtered rows to Excel.

Change Theme

Theme

Loading ...

See Also

How to export all Grid data to Excel