New to Kendo UI for Angular? Start a free 30-day trial

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

Environment

ProductProgress® 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.

    <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.

    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.

Example
View Source
Change Theme:

See Also

How to export all Grid data to Excel

In this article

Not finding the help you need?