jQuery/JS Common - Object Structures - ExcelExportDataGridProps
Properties that can be passed to the exportDataGrid(options) method from the excelExporter module.
autoFilterEnabled
Specifies whether to enable Excel filtering in the document.
customizeCell
Customizes Excel cells after creation.
customizeCell options.
| Name | Type | Description |
|---|---|---|
| excelCell |
An Excel cell. |
|
| gridCell |
A DataGrid cell. |
DevExtreme ExcelJS allows you to customize the following Excel cell properties:
The following code snippet checks DataGrid cell rowType values to customize Excel cells in data rows:
jQuery
$(function() {
$("#dataGridContainer").dxDataGrid({
// ...
export: {
enabled: true
},
onExporting(e) {
const workbook = new ExcelJS.Workbook();
const worksheet = workbook.addWorksheet('Companies');
DevExpress.excelExporter.exportDataGrid({
component: e.component,
worksheet: worksheet,
topLeftCell: { row: 2, column: 2 },
customizeCell: function(options) {
var { gridCell, excelCell } = options;
if(gridCell.rowType === 'data') {
excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
excelCell.alignment = { horizontal: 'left' };
}
}
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
});
});
}
});
});
<head>
<!-- ... -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/devextreme-exceljs-fork@4.4.1/dist/dx-exceljs-fork.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.2/FileSaver.min.js"></script>
<!-- reference the DevExtreme sources here -->
</head>Angular
<dx-data-grid ...
(onExporting)="onExporting($event)">
<dxo-data-grid-export [enabled]="true"></dxo-data-grid-export>
</dx-data-grid>
import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
@Component({
selector: 'app-root',
templateUrl: './app.component.html',
styleUrls: ['./app.component.css']
})
export class AppComponent {
onExporting(e) {
const workbook = new Workbook();
const worksheet = workbook.addWorksheet('Companies');
exportDataGrid({
component: e.component,
worksheet: worksheet,
topLeftCell: { row: 2, column: 2 },
customizeCell: function(options) {
const { gridCell, excelCell } = options;
if(gridCell.rowType === 'data') {
excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
excelCell.alignment = { horizontal: 'left' };
}
}
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer: BlobPart) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
});
});
}
}
import { BrowserModule } from '@angular/platform-browser';
import { NgModule } from '@angular/core';
import { AppComponent } from './app.component';
import { DxDataGridModule } from 'devextreme-angular';
@NgModule({
declarations: [
AppComponent
],
imports: [
BrowserModule,
DxDataGridModule
],
providers: [ ],
bootstrap: [AppComponent]
})
export class AppModule { }Vue
<template>
<DxDataGrid ...
@exporting="onExporting">
<DxExport
:enabled="true"
/>
</DxDataGrid>
</template>
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
export default {
components: {
DxDataGrid,
DxExport
},
methods: {
onExporting(e) {
const workbook = new Workbook();
const worksheet = workbook.addWorksheet('Companies');
exportDataGrid({
component: e.component,
worksheet: worksheet,
topLeftCell: { row: 2, column: 2 },
customizeCell: function(options) {
const { gridCell, excelCell } = options;
if(gridCell.rowType === 'data') {
excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
excelCell.alignment = { horizontal: 'left' };
}
}
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
});
});
}
}
}
</script>React
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, { Export } from 'devextreme-react/data-grid';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
import { exportDataGrid } from 'devextreme/excel_exporter';
class App extends React.Component {
render() {
return (
<DataGrid ...
onExporting={this.onExporting}>
<Export enabled={true} />
</DataGrid>
);
}
onExporting(e) {
const workbook = new Workbook();
const worksheet = workbook.addWorksheet('Companies');
exportDataGrid({
component: e.component,
worksheet: worksheet,
topLeftCell: { row: 2, column: 2 },
customizeCell: function(options) {
const { gridCell, excelCell } = options;
if(gridCell.rowType === 'data') {
excelCell.font = { color: { argb: 'FF0000FF' }, underline: true };
excelCell.alignment = { horizontal: 'left' };
}
}
}).then(function() {
workbook.xlsx.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx");
});
});
}
}
export default App;To add asynchronous operations to customizeCell, follow these steps:
- Define a Promise array in the onExporting handler.
- In customizeCell, add your asynchronous operations to the Promise array.
In exportDataGrid.then(), save the exported file within a Promise.all().then() callback. Pass the promise array defined in onExporting as the Promise.all() parameter as follows:
onExporting(e) { const workbook = new Workbook(); const worksheet = workbook.addWorksheet('Companies'); let promiseArray = []; exportDataGrid({ component: e.component, worksheet: worksheet, topLeftCell: { row: 2, column: 2 }, customizeCell: function(options) { const asyncOperation = new Promise((resolve, reject) => { // ... }); promiseArray.push(asyncOperation); } }).then(() => { Promise.all(promiseArray).then(() => { workbook.xlsx.writeBuffer().then(function(buffer) { saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Companies.xlsx"); }); }); }); }
encodeExecutableContent
Specifies if the CSV export routine saves potentially dangerous content as plain text data.
Exported spreadsheet documents can be unsafe because executable content (such as formulas) may include malicious code. A spreadsheet application can execute this code if a user opens such a file and confirms that the application can load and execute dynamic content.
Enable this property to ensure that exported CSV files are safe for loading in third-party spreadsheet applications.
keepColumnWidths
Specifies whether Excel columns should have the same width as their source UI component's columns.
topLeftCell
A cell used as a start position for export.
The cell is specified using coordinates in the Excel document. For example, the following code specifies cell B2:
DevExpress.excelExporter.exportDataGrid({
// ...
topLeftCell: { row: 2, column: 2 }
});You can also specify the topLeftCell using the Excel notation:
DevExpress.excelExporter.exportDataGrid({
// ...
topLeftCell: "B2"
});worksheet
An Excel worksheet to which the grid should be exported.
A worksheet is a part of a workbook. Refer to the DevExtreme ExcelJS documentation for information on how to create a workbook and add a worksheet to it.