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

Export Selected Grid Rows to Excel

Environment

Product

Progress® Kendo UI for Angular Grid

Description

How can I export only the selected rows of the Kendo UI for Angular Grid to Excel?

This article also answers the following questions:

How can I export checked rows from the Grid?
What is the method to export selected grid rows to Excel in Angular?
How to use selection in the Kendo UI Grid for Angular to export to Excel?

Solution

The following example demonstrates how to export only selected rows to Excel.

Change Theme

Theme

Loading ...

By default, the Excel export functionality of the Grid generates a file containing the current data of the component. To export specific data to Excel that includes only the selected Grid rows:

Use the kendoGridSelectBy directive of the Grid to store the selected items in the selectedKeys collection that the directive provides:
html
```
<kendo-grid
    ...
    kendoGridSelectBy
    [(selectedKeys)]="mySelection"
></kendo-grid>
```
Use the fetchData callback of the ExcelComponent to specify the data to be exported in Excel.
html
```
<kendo-grid ... >
    ...
    <kendo-grid-excel [fetchData]="allData" fileName="Products.xlsx" ></kendo-grid-excel>
</kendo-grid>
```
In the fetchData callback, return an ExcelExportData object that contains only the items that are selected according to the selectedKeys collection.

Make sure the fetchData handler is an arrow function which retains the correct this context.
ts
```
public mySelection: number[] = [];
public selectedData = ():ExcelExportData =>{
  const result = {
    data: this.mySelection,
  };
  return result;
}
```

Export Selected Grid Rows to Excel

Environment

Description

Solution

See Also