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

Excel

configuration

Configures the Kendo UI Grid Excel export settings.

excel

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: ["excel"],
  excel: {
    fileName: "ProductData.xlsx",
    allPages: true,
    filterable: true
  }
});
</script>

excel.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: ["excel"],
    excel: {
        allPages: true
    },
    dataSource: {
        transport: {
            read: {
                url: "https://demos.telerik.com/service/v2/core/products"
            }
        },
        pageSize: 10
    },
    pageable: true
});
</script>

excel.collapsible

Boolean

Enables or disables collapsible (grouped) rows, for grids with aggregates.

Default: false

<div id="grid"></div>
<script>
 $("#grid").kendoGrid({
   toolbar: ["excel"],
   excel: {
     fileName: "excel-collapsible.xlsx",
     proxyURL: "https://demos.telerik.com/service/v2/core/export",
     filterable: true,
     collapsible: true
   },
   dataSource: {
     transport: {
       read: "https://demos.telerik.com/service/v2/core/Products"
     },
     schema:{
       model: {
         fields: {
           UnitsInStock: { type: "number" },
           ProductName: { type: "string" },
           UnitPrice: { type: "number" },
           UnitsOnOrder: { type: "number" },
           UnitsInStock: { type: "number" }
         }
       }
     },
     pageSize: 50,
     group: {
       field: "UnitsInStock", aggregates: [
         { field: "ProductName", aggregate: "count" },
         { field: "UnitPrice", aggregate: "sum"},
         { field: "UnitsOnOrder", aggregate: "average" },
         { field: "UnitsInStock", aggregate: "count" }
       ]
     },
     aggregate: [
       { field: "ProductName", aggregate: "count" },
       { field: "UnitPrice", aggregate: "sum" },
       { field: "UnitsOnOrder", aggregate: "average" },
       { field: "UnitsInStock", aggregate: "min" },
       { field: "UnitsInStock", aggregate: "max" }
     ]
   },
   sortable: true,
   pageable: true,
   groupable: true,
   filterable: true,
   columnMenu: true,
   reorderable: true,
   resizable: true,
   columns: [
     { field: "ProductName", title: "Product Name", aggregates: ["count"], footerTemplate: ({ ProductName }) => `Total Count: ${ProductName.count}`, groupFooterTemplate: ({ ProductName }) => `Count: ${ProductName.count}` },
     { field: "UnitPrice", title: "Unit Price", aggregates: ["sum"] },
     { field: "UnitsOnOrder", title: "Units On Order", aggregates: ["average"], footerTemplate: ({ UnitsOnOrder }) => `Average: ${UnitsOnOrder.average}`,
       groupFooterTemplate: ({ UnitsOnOrder }) => `Average: ${UnitsOnOrder.average}` },
     { field: "UnitsInStock", title: "Units In Stock", aggregates: ["min", "max", "count"], footerTemplate: ({ UnitsInStock }) => `Min: ${UnitsInStock.min} Max: ${UnitsInStock.max}`,
       groupHeaderTemplate: "Units In Stock: ${UnitsInStock.group.value} (Count: ${UnitsInStock.count})" }
   ]
 });
</script>

excel.fileName

String

Specifies the file name of the exported Excel file. Must end with ".xlsx".

Default: "Export.xlsx"

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

Enables or disables column filtering in the Excel file. When set to true the exported Excel file comes with turned on filtering for the column headers. Not to be mistaken with the grid filtering feature.

Default: false

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

excel.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: ["excel"],
  excel: {
    forceProxy: true,
    proxyURL: "/save"
  }
});
</script>

excel.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.xslx>".

Default: null

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