Exporting the Grid to a CSV File

Environment

Product

Progress® Kendo UI for Angular Grid

Description

I want to export the Grid data to a CSV (Comma-separated values) file. Is it possible?

Solution

The Kendo UI for Angular Grid does not support the export of its data to a CSV file.

However, you can still achieve this by using any third-party library which can convert an array of JSON documents to CSV, for example, the json-2-csv library. Then, use the FileSaver package and its saveAs function to save the newly created file.

html

<kendo-grid [data]="gridData" [height]="410">
    <ng-template kendoGridToolbarTemplate>
      <button kendoButton (click)="exportToCSV()">Export to CSV</button>
    </ng-template>
    <kendo-grid-column field="ProductID" title="ID" [width]="40">
    </kendo-grid-column>
    ...
</kendo-grid>

ts

  import { json2csv } from 'json-2-csv';
  ...
  public exportToCSV() {
    json2csv(this.gridData, (err, csv) => {
      const dataURI = 'data:text/plain;base64,' + encodeBase64(csv);
      saveAs(dataURI, 'gridData.csv');
    });
  }

The purpose of this article is to provide basic guidance on how to export the Grid data to CSV. Kendo UI for Angular is not affiliated with the json-2-csv library. You can use any third-party library which supports such type of conversion.

The following example demonstrates the full implementation of the suggested approach.

Change Theme

Theme

Loading ...