Kendo UI Grid – Export to Excel – Customization

 Kendo Grid Export:

This post is to guide regarding “Export to excel” functionality and how we can customize based on our requirement in Kendo Grid.
Kendo Grid gives Export feature by default, what all we need to do is need to configure in the grid configurations.

Introduction : 

Since Kendo UI 2014 Q3 release Kendo UI has provided Excel generation support. It allows you to create Excel documents in JavaScript and save them on the client machine.

The default configuration Kendo UI Grid exports the current page of the data with sorting, filtering, grouping and aggregates applied. Export All Data shows how to export all pages.

The grid uses the current column order, visibility and dimensions to generate the Excel file.

The grid doesn’t export the current CSS theme in the Excel file. Check Customize the Excel Document for information about changing the visual appearance of the Excel document.

The grid exports only data-bound columns. Template and command columns are ignored.

How to add Export functionality to Kendo Grid

 Create an MVC view and need to add the code to populate Kendo Grid as below by using required MVC model.

The below code describes about following 4 points.

1) Specifies the file name of the exported Excel file.

2) Enables or disables column filtering in the Excel file. Not to be mistaken with the grid filtering feature.

3) 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.

We need to add proper actions in related controllers on your need and in this case  “Excel_Export_Save” method to be added in “WorkorderController”.

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


Export to Excel Issue:

To customize the column size or width in downloaded file need to provide the width for the column.

This may cause resulting issues regarding one of the Boolean properties. As always Boolean property shows true or false in the exported excel file.

If user want to see  “Yes” instead of “true” and “No” instead of “false” then we need to add the below event for the Grid. We can customize this kind of scenario by providing the  solution  as provided below.

We can customize the Export as per our requirement by providing event “ExcelExport”.

In the below JavaScript, we need to add a function to customize the excel file to be downloaded as explained above.

The following example demonstrates how to have the Export feature enabled in a Kendo UI Grid. Make sure we need to have the MVC model to demonstrates the grid

This way we can customize the excel file to be exported from Kendo Grid.


About The Author

Leave a Reply