Angular Data Grid CSV Export
Export your Grid data to CSV format for seamless integration with spreadsheet applications and data processing tools.
The Grid enables you to create CSV files with custom delimiters, headers, and encoding options. Export all data or just what's visible, configure field separators, and customize every aspect of the generated file.
Getting Started
Import the KENDO_GRID_CSV_EXPORT utility array and nest the kendo-grid-csv component inside kendo-grid tags.
Trigger the export using the kendoGridCSVCommand directive, kendoGridCSVTool toolbar tool, or saveAsCSV method.
<kendo-grid>
<kendo-grid-csv></kendo-grid-csv>
</kendo-grid>The following example demonstrates the CSV export functionality of the Grid.
Controlling the Exported Data
By default, the Grid exports only the currently visible data—the current page when paging is enabled, or a batch of rows when virtual scrolling is used. However, you often need to export a different data set than what appears on screen, such as all records across all pages or only selected rows.
The fetchData callback function gives you complete control over which data appears in the CSV file. This function receives the current Grid data and lets you transform or replace it before export.
Exporting Different Data Sets
You can use the fetchData callback to export all data of the Grid or various subsets based on your specific requirements.
<kendo-grid>
<kendo-grid-csv [fetchData]="customData"></kendo-grid-csv>
</kendo-grid>The following example demonstrates how to export all data when the Grid is paginated. Instead of exporting only the visible page, the export includes all records. The same approach works when virtual scrolling is enabled.
The fetchData function must return an array of data objects or a DataResult object. The function receives the Grid component and lets you access its data and configuration. This enables various scenarios:
- Export all data—Retrieve the complete data set regardless of paging or virtual scrolling.
- Export selected rows only—Export only the rows that users have selected in the Grid.
- Export filtered data—Export data based on specific filtering criteria.
- Export processed data—Apply custom sorting, filtering, or transformations before export.
Exporting Data from Remote Sources
You can use the fetchData callback to export data from remote servers or APIs. This is especially useful when the Grid displays paginated or virtualized data, but you need to export the complete data set.
The callback function supports asynchronous data loading by accepting Observable or Promise return types, allowing you to load data from remote sources before the export begins.
The following example demonstrates how to export all data from a remote source. The Grid displays paginated data, but clicking the Export button fetches the complete data set from the server and exports it to CSV.
Exporting Grouped Data
The Grid supports exporting grouped data to CSV format. When the Grid is grouped, the exported CSV file reflects the group structure, including group headers and aggregated values. You can customize the appearance of group headers and values using the groupHeaderFormatter and groupValueFormatter properties.
<kendo-grid>
<kendo-grid-csv
[groupHeaderFormatter]="groupHeaderFormatter"
[groupValueFormatter]="groupValueFormatter"
></kendo-grid-csv>
</kendo-grid>By default, the Grid uses a pipe character | to separate group field names and group values. You can customize these formatters to create more meaningful group representations in your CSV files.
The following example demonstrates how to export grouped data with custom group header and value formatting.
Exporting Selected Data
You can export only the Grid rows selected by users instead of exporting all data. This is useful when users want to export specific records they have chosen for analysis or reporting purposes.
Use the kendoGridSelectBy directive combined with the selectedKeys property to track selected rows, and the fetchData callback to filter and export only the selected items. The selection directive stores the selected items in the selectedKeys collection, which you can use to identify which rows to include in the export.
The following example demonstrates how to export selected rows to CSV. Users can select specific rows using checkboxes, and only the selected data will be included in the exported file.
CSV Export Options
The CSV export component provides several properties to customize the generated CSV file according to your needs. You can adjust the delimiter, line separators, encoding options, column headers, and more.
The following example demonstrates how to customize various CSV export options.
Delimiter and Line Separators
The delimiter property sets the character used to separate values in each row. By default, the Grid uses a comma (,), but you can change it to semicolons, tabs, or other characters based on your regional settings or application requirements.
The lineSeparator property controls how rows are separated. The default value is \r\n (Windows line ending), but you can customize it for different operating systems or specific requirements.
<kendo-grid>
<kendo-grid-csv delimiter=";" lineSeparator="\n"></kendo-grid-csv>
</kendo-grid>UTF-8 BOM
The includeUTF8BOM property, when set to true, adds a UTF-8 Byte Order Mark (BOM) at the beginning of the file. This helps applications like Microsoft Excel correctly recognize UTF-8 encoding and display special characters properly.
<kendo-grid>
<kendo-grid-csv [includeUTF8BOM]="true"></kendo-grid-csv>
</kendo-grid>Custom Column Headers and Keys
By default, the Grid extracts column headers from each column's title or field properties. Use the names property to provide custom header names for the exported CSV file.
The keys property specifies which data fields to extract from each row object. By default, the Grid uses the field values from the column definitions.
<kendo-grid>
<kendo-grid-csv
[names]="['ID', 'Customer', 'Amount']"
[keys]="['id', 'customerName', 'totalAmount']">
</kendo-grid-csv>
</kendo-grid>Formula Injection Prevention
The preventFormulaInjection property protects against formula injection attacks in spreadsheet applications. When enabled (default is true), the Grid prefixes potentially dangerous formula characters (=, +, -, @, tab, \r) with a single quote (') to prevent them from being interpreted as formulas.
<kendo-grid>
<kendo-grid-csv [preventFormulaInjection]="true"></kendo-grid-csv>
</kendo-grid>Cell Length Limits
The maxCellLength property sets the maximum number of characters allowed per cell. Values exceeding this limit are automatically truncated. The default value is 32767, which matches Excel's cell character limit.
<kendo-grid>
<kendo-grid-csv [maxCellLength]="10000"></kendo-grid-csv>
</kendo-grid>Rows and Columns Limits
The maxRows and maxColumns properties control the maximum number of rows and columns included in the export. These limits help prevent memory exhaustion when exporting large data sets and protect against potential security issues.
By default, the Grid exports up to 1,000,000 rows and 1,000 columns. When your data exceeds these limits, the export automatically truncates to the specified maximum values.
<kendo-grid>
<kendo-grid-csv [maxRows]="500000" [maxColumns]="50"></kendo-grid-csv>
</kendo-grid>Customizing Export Behavior
The csvExport event provides control over the CSV generation process. The event exposes the generated CSV string, which you can modify before the file is saved.
The following example demonstrates how to customize the exported CSV by adding a custom header with metadata and a footer with summary information.
Handle the csvExport event to:
- Add custom headers or footers to the CSV file.
- Modify cell values or formatting.
- Transform the CSV content before download.
- Prevent the default export and handle file saving manually.
- Log export operations or track usage.
Triggering Export Externally
Besides using the built-in export button or toolbar tool, you can trigger the CSV export programmatically from your own custom UI elements or business logic. Call the saveAsCSV method on the Grid component instance to initiate the export operation.
This approach is useful when you need to integrate the export functionality with custom buttons, menu items, or automated workflows. You can also combine it with other operations, such as validating data or applying filters before triggering the export.
The following example demonstrates how to trigger the CSV export using a custom button outside the Grid.
Known Limitations
- The Grid does not export cell templates or column templates. The export includes only the raw data values. To customize the exported content, transform your data before export or use the
fetchDatacallback. - The Grid does not export detail templates. For hierarchical data, you must flatten the structure in the
fetchDatacallback or handle it in thecsvExportevent. - The Grid does not apply column formats during export. CSV is a plain text format without formatting capabilities. If you need formatted values, transform the data in the
fetchDatacallback before export. - CSV files are plain text and do not support styling, colors, or advanced formatting. For formatted exports, use the Excel Export feature instead.