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

CSV Export

Updated on Mar 19, 2026

The Grid component provides built-in CSV export functionality.

For a runnable example, refer to the demo on exporting the Grid to CSV.

Getting Started

To enable CSV export:

Include the corresponding toolbar command and set the CSV settings.
- Toolbar configuration
- CSV export configuration
To trigger export through code, call the saveAsCSV method.

By default, the Grid exports the current page of data with the current sorting, filtering, grouping, and column state.

The following example demonstrates how to enable CSV export from the toolbar.

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            toolbar: ["csv"],
            csv: {
                fileName: "Kendo UI Grid Export.csv"
            },
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Products"
                },
                pageSize: 7
            },
            sortable: true,
            pageable: true,
            columns: [
                { field: "ProductName", title: "Product Name" },
                { field: "UnitPrice", title: "Unit Price" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
    </script>

Configuration

With regard to its CSV export, the Grid enables you to:

Export all pages
Customize CSV output options
Export selected rows
Customize the generated CSV string

Exporting All Pages

By default, the Grid exports only the current page. To export all pages, set csv.allPages to true.

    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            toolbar: ["csv"],
            csv: {
                fileName: "Products.csv",
                allPages: true
            },
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Products"
                },
                pageSize: 10
            },
            pageable: true,
            columns: [
                { field: "ProductName", title: "Product Name" },
                { field: "UnitPrice", title: "Unit Price" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
    </script>

When allPages is enabled and remote paging is used, the Grid requests all data before exporting.

Customizing CSV Options

You can customize the exported CSV through the csv configuration:

The following example demonstrates a custom delimiter, custom line separator, UTF-8 BOM, and formula injection protection.

    <button id="export">Export to CSV</button>
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            csv: {
                fileName: "Transactions.csv"
            },
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Customers"
                },
                pageSize: 10
            },
            pageable: true,
            columns: [
                { field: "ContactName", title: "Contact Name" },
                { field: "ContactTitle", title: "Contact Title" },
                { field: "CompanyName", title: "Company Name" },
                { field: "Country", title: "Country" }
            ]
        });

        $("#export").on("click", function() {
            var grid = $("#grid").data("kendoGrid");

            grid.setOptions({
                csv: $.extend({}, grid.options.csv, {
                    delimiter: ";",
                    lineSeparator: "\n",
                    includeUTF8BOM: true,
                    preventFormulaInjection: true,
                    maxCellLength: 32767
                })
            });

            grid.saveAsCSV();
        });
    </script>

Exporting Selected Rows

To export only selected rows, enable row selection and call exportSelectedToCSV.

    <button id="exportSelected">Export Selected to CSV</button>
    <div id="grid"></div>
    <script>
        $("#grid").kendoGrid({
            persistSelection: true,
            selectable: "multiple, row",
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Customers"
                },
                schema: {
                    model: {
                        id: "CustomerID"
                    }
                },
                pageSize: 10
            },
            pageable: true,
            columns: [
                { selectable: true, width: 50 },
                { field: "ContactName", title: "Contact Name" },
                { field: "ContactTitle", title: "Contact Title" },
                { field: "CompanyName", title: "Company Name" },
                { field: "Country", title: "Country" }
            ]
        });

        $("#exportSelected").on("click", function() {
            var grid = $("#grid").data("kendoGrid");
            grid.exportSelectedToCSV(true);
        });
    </script>

Customizing the Generated CSV

Use the csvExport event to inspect or modify the generated CSV string.

    <div id="grid"></div>
    <pre id="csvPreview"></pre>
    <script>
        $("#grid").kendoGrid({
            toolbar: ["csv"],
            csv: {
                fileName: "CustomizedExport.csv"
            },
            dataSource: {
                transport: {
                    read: "https://demos.telerik.com/service/v2/core/Products"
                },
                pageSize: 10
            },
            csvExport: function(e) {
                var header = "# Product Report\r\n#\r\n";
                var footer = "\r\n# End of Report";

                e.csv = header + e.csv + footer;
                $("#csvPreview").text(e.csv);
            },
            pageable: true,
            columns: [
                { field: "ProductName", title: "Product Name" },
                { field: "UnitPrice", title: "Unit Price" },
                { field: "UnitsOnOrder", title: "Units On Order" },
                { field: "UnitsInStock", title: "Units In Stock" }
            ]
        });
    </script>

Known Limitations

When exporting all pages with large remote datasets, the browser may become unresponsive.
Older browsers may require a server proxy. Configure csv.proxyURL and csv.forceProxy when needed.
The saveAsCSV method does not trigger the csvExport event.
The Grid CSV export does not support exporting footer rows.

If you need footer totals in the exported file, append a total row to the flat data before generating the CSV.

javascript

// Example structure of flat data with totals included
const rows = [
    { product: "A", amount: 10 },
    { product: "B", amount: 15 },
    { product: "Total", amount: 25 }
];