Export

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

NOTE
Currently, only exporting to XLSX files is supported.

Set up Exporting

Follow the steps below to enable exporting.

  • Add a link to the jszip.js (jszip.js.min) library to your app/site. This library is accessible within your DevExtreme Package.

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

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

JavaScript
var gridOptions = {
    //...
    export : {
        enabled: true,
        fileName: 'myGrid'
    }
}
NOTE
Exporting is performed using client-side API in browsers. However, some browsers (including IE8, 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 of whether to export the total grid or selected rows only.

DevExtreme DataGrid Exporting Selected Rows

Note that changes caused by the cell template, row template and master-detail interface features will be omitted in the exported file.

Export to Excel

The dxDataGrid 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

NOTE
Take into account the limitations related to Excel possibilities when exporting grid data to Excel.
  • While the dxDataGrid 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 dxDataGrid 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', 'monthAndDay', 'monthAndYear', 'shortDate', 'shortTime', 'day', '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, IE8, 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.

ASPx

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.Clear();
                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());
                context.Response.BinaryWrite(Convert.FromBase64String(context.Request.Form["data"].ToString()));
                context.Response.Flush();
                context.Response.End();
            }
        }
        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.Clear()
                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())
                context.Response.BinaryWrite(Convert.FromBase64String(context.Request.Form("data").ToString()))
                context.Response.Flush()
                context.Response.End()
            End If
        End Sub

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

End Namespace

PHP

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

<?php
    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]}\"");
      die(base64_decode($_POST["data"]));
    } 
?>

Usage

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.