Client-Side Export

The DataGrid widget is designed to manage data online as well as to export the grid data to a file.

Currently, only exporting to XLSX files is supported.

Watch Video

Set up Exporting

Follow the steps below to enable exporting.

  • Add a link to the JSZip library to your app/site. Learn where you can get it from topics in the Installation section.

    <script type="text/javascript" src="js/jszip.min.js"></script>
    Reference the jszip.min.js script before the DevExtreme scripts.
  • Set the grid's export | enabled option to true.

  • Specify a default name for the resulting file using the export | fileName option.

var gridOptions = {
    export : {
        enabled: true,
        fileName: 'myGrid'
Exporting is performed using client-side API in browsers. However, some browsers (including IE9 and Safari on Mac OS) do not implement an API for saving files, thus the exporting feature will not work correctly without the use of additional services. Refer to the Set up Server-side Proxy section for details.

When export is enabled, an Export button is displayed above the grid.

DevExtreme DataGrid Exporting

Pressing this button, an end user can export grid data in the required format.

When a possibility to export only the currently selected rows is needed, set the export | allowExportSelectedData option to true. End users will be given a choice between exporting the total grid or selected rows only.

DevExtreme DataGrid Exporting Selected Rows

Changes caused by the cell template, row template, master-detail interface and data mapping will be omitted in the exported file.

Instead of data mapping, you can use calculated columns, which will be included in the exported file.

Export to Excel

The DataGrid widget exports data to excel as it is presented in the grid - with sorting, filtering and grouping applied. Data types in the resulting Excel file are kept - numbers stay numbers, dates stay dates. This allows users to work with the exported data in Excel without any data transformations. For instance, users can use the exported data in Excel formulas, summaries, etc.

DevExtreme DataGrid Export to Excel

Take into account the limitations related to Excel possibilities when exporting grid data to Excel.
  • While the DataGrid widget supports any number of nesting levels in data grouping, the range of possible nesting levels in Excel is from 0 to 7.
  • While the DataGrid widget supports a number of formats, including custom ones, only the following formats are supported in Excel: 'currency', 'fixedPoint', 'percent', 'decimal', 'exponential', 'thousands', 'millions', 'billions', 'trillions', 'longDate', 'longTime', 'longDateLongTime', 'shortDateShortTime', 'monthAndDay', 'monthAndYear', 'shortDate', 'shortTime', 'day', 'dayOfWeek', 'month', 'year'.

You can enable some Excel features beforehand, using the following grid options:

View Demo Watch Video

Export in Code

You can use the following methods to export grid data in code.

To influence the process of exporting grid data, handle the following events.

  • exporting
    Allows you to request export details and prevents exporting.

  • exported
    Allows you to get notified when exporting is completed.

  • fileSaving
    Allows you to access exported data in the BLOB format and/or prevent it from being saved in a file on the user's local storage.

Set up Server-side Proxy

If your application will be used in browsers that do not implement an API for saving files (for instance, IE9 and Safari on Mac OS) and you need the exporting feature to work correctly, you can implement a server-side proxy, which will stream the file back to the end user in response to a POST request. The proxy implementation is different for each platform.


If your server runs the ASP.NET web application framework, you can implement a proxy using the following HTTP handler.


using System;
using System.Web;

namespace ExportService {

    public class ExportHandler : IHttpHandler {
        public void ProcessRequest(HttpContext context) {
            if(context.Request.Form["contentType"] != null && 
               context.Request.Form["fileName"]    != null && 
               context.Request.Form["data"]        != null) {
                context.Response.ContentType = context.Request.Form["contentType"].ToString();
                context.Response.Charset = "UTF-8";
                context.Response.Expires = 0;
                context.Response.AppendHeader("Content-transfer-encoding", "binary");
                                              "attachment; filename=" + context.Request.Form["fileName"].ToString());
        public bool IsReusable {
            get { return false; }


Visual Basic

Imports System
Imports System.Web

Namespace ExportService

    Public Class ExportHandler
        Implements IHttpHandler

        Public Sub ProcessRequest(ByVal context As HttpContext) Implements IHttpHandler.ProcessRequest
            If context.Request.Form("contentType") IsNot Nothing AndAlso
               context.Request.Form("fileName")    IsNot Nothing AndAlso
               context.Request.Form("data")        IsNot Nothing Then
                context.Response.ContentType = context.Request.Form("contentType").ToString()
                context.Response.Charset = "UTF-8"
                context.Response.Expires = 0
                context.Response.AppendHeader("Content-transfer-encoding", "binary")
                context.Response.AppendHeader("Content-Disposition", "attachment; filename=" & context.Request.Form("fileName").ToString())
            End If
        End Sub

        Public ReadOnly Property IsReusable() As Boolean Implements IHttpHandler.IsReusable
                Return False
            End Get
        End Property
    End Class

End Namespace


If your server-side language is PHP, add a page with the following code to your website.

    if(!empty($_POST["data"]) && !empty($_POST["contentType"]) && !empty($_POST["fileName"])) {
      header("Access-Control-Allow-Origin: *");
      header("Content-type: {$_POST[contentType]};\n");
      header("Content-Transfer-Encoding: binary");
      header("Content-length: ".strlen($_POST["data"]).";\n");
      header("Content-disposition: attachment; filename=\"{$_POST[fileName]}\"");


To enable server-side proxy support in a data grid, set the export | proxyUrl option to the proxy that will stream the file to the end user.