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

Csv

configuration

Configures the CSV export settings of the grid.

csv

Object

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" },
    { field: "unitPrice" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages", unitPrice: 2.5 },
    { productName: "Coffee", category: "Beverages", unitPrice: 3.0 }
  ],
  toolbar: ["csv"],
  csv: {
    fileName: "ProductData.csv",
    allPages: true
  }
});
</script>

csv.allPages

Boolean

If set to true the grid will export all pages of data. By default the grid exports only the current page.

If the grid is bound to remote data and allPages is set to true it will request all data items from the remote service. Be careful if you have a lot of data.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        allPages: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.delimiter

String

The delimiter character used to separate values in the CSV output.

Default: ","

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        delimiter: ";"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.fileName

String

Specifies the file name of the exported CSV file.

Default: "Export.csv"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        fileName: "Products.csv"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.forceProxy

Boolean

If set to true, the content will be forwarded to proxyURL even if the browser supports saving files locally.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
  columns: [
    { field: "productName" },
    { field: "category" }
  ],
  dataSource: [
    { productName: "Tea", category: "Beverages" },
    { productName: "Coffee", category: "Beverages" }
  ],
  toolbar: ["csv"],
  csv: {
    forceProxy: true,
    proxyURL: "/save"
  }
});
</script>

csv.includeUTF8BOM

Boolean

If set to true, a UTF-8 BOM (Byte Order Mark) will be prepended to the CSV content. This can be useful for ensuring proper character encoding when opening the file in Excel.

Default: false

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        includeUTF8BOM: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.lineSeparator

String

The line separator used between rows in the CSV output.

Default: "\r\n"

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        lineSeparator: "\n"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.maxCellLength

Number

The maximum number of characters allowed in a single cell. Longer values will be truncated.

Default: 32767

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        maxCellLength: 100
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.maxColumns

Number

The maximum number of columns to include in the CSV export.

Default: 1000

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        maxColumns: 5
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.maxRows

Number

The maximum number of rows to include in the CSV export.

Default: 1000000

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        maxRows: 1000
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.preventFormulaInjection

Boolean

If set to true, cell values starting with =, +, -, @, \t, or \r will be prefixed with a single quote (') to prevent formula injection.

Default: true

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        preventFormulaInjection: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

csv.proxyURL

String

The URL of the server side proxy which will stream the file to the end user.

A proxy will be used when the browser isn't capable of saving files locally. Such browsers are IE version 9 and lower and Safari.

The developer is responsible for implementing the server-side proxy.

The proxy will receive a POST request with the following parameters in the request body:

contentType: The MIME type of the file
base64: The base-64 encoded file content
fileName: The file name, as requested by the caller.

The proxy should return the decoded file with the "Content-Disposition" header set to attachment; filename="<fileName.csv>".

<div id="grid"></div>
<script>
$("#grid").kendoGrid({
    toolbar: ["csv"],
    csv: {
        proxyURL: "/save"
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>