Skip to content
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Original file line number Diff line number Diff line change
Expand Up @@ -12,7 +12,7 @@ Reference the specified script *before* the DevExtreme scripts. You can use the
<!-- ... -->
<script src="https://code.jquery.com/jquery-3.5.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.9/jspdf.plugin.autotable.min.js"></script>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -50,7 +50,7 @@ The following details should be taken into account when you use a **dataRowTempl

- You should implement the following features manually: [editing](/api-reference/10%20UI%20Components/GridBase/3%20Methods/editRow(rowIndex).md '/Documentation/ApiReference/UI_Components/dxDataGrid/Methods/#editRowrowIndex'), [adaptability](/concepts/05%20UI%20Components/DataGrid/15%20Columns/50%20Adaptability '/Documentation/Guide/UI_Components/DataGrid/Columns/Adaptability/'), [selection](/concepts/05%20UI%20Components/DataGrid/50%20Selection/20%20API '/Documentation/Guide/UI_Components/DataGrid/Selection/#API'), [master-detail interface](/concepts/05%20UI%20Components/DataGrid/60%20Master-Detail%20Interface/20%20API.md '/Documentation/Guide/UI_Components/DataGrid/Master-Detail_Interface/#API'), and [focused row](/concepts/05%20UI%20Components/DataGrid/73%20Focused%20Row.md '/Documentation/Guide/UI_Components/DataGrid/Focused_Row/'). Follow the links to review the API that can help you with this task.

- When the DataGrid is [exported](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/') to Excel, it omits customizations made in the template. However, you can use ExcelJS API to recreate the changes in the exported file. Use the [customizeCell](/api-reference/50%20Common/Object%20Structures/ExcelExportDataGridProps/customizeCell.md '/Documentation/ApiReference/Common/Object_Structures/ExcelExportDataGridProps/#customizeCell') function to do this.
- When the DataGrid is [exported](/api-reference/10%20UI%20Components/dxDataGrid/1%20Configuration/export '/Documentation/ApiReference/UI_Components/dxDataGrid/Configuration/export/') to Excel, it omits customizations made in the template. However, you can use DevExtreme ExcelJS API to recreate the changes in the exported file. Use the [customizeCell](/api-reference/50%20Common/Object%20Structures/ExcelExportDataGridProps/customizeCell.md '/Documentation/ApiReference/Common/Object_Structures/ExcelExportDataGridProps/#customizeCell') function to do this.

- You should specify all CSS rules manually if you use this property. Refer to the following demo's `styles.css` tab to see an example:

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,7 @@ The following instructions show how to enable and configure client-side export:

Install the following libraries for the export:

- Excel: The <a href="https://github.com/exceljs/exceljs" target="_blank">ExcelJS</a> v4.4.0+ and <a href="https://github.com/eligrey/FileSaver.js/" target="_blank">FileSaver</a> v2.0.2+ libraries. If you apply [CSP rules](/concepts/Common/Security%20Considerations/40%20Content%20Security%20Policy/00%20Content%20Security%20Policy.md '/Documentation/Guide/Common/Security_Considerations/#Content_Security_Policy'), refer to the [ExcelJS CSP Treats](/concepts/Common/Security%20Considerations/30%20Export%20Vulnerabilities/20%20ExcelJS%20CSP%20Threats.md '/Documentation/Guide/Common/Security_Considerations/#Export_Vulnerabilities/ExcelJS_CSP_Threats') section for more information about potential vulnerabilities.
- Excel: The <a href="https://github.com/DevExpress/devextreme-exceljs-fork" target="_blank">DevExtreme ExcelJS</a> v4.4.1+ and <a href="https://github.com/eligrey/FileSaver.js/" target="_blank">FileSaver</a> v2.0.2+ libraries. If you apply [CSP rules](/concepts/Common/Security%20Considerations/40%20Content%20Security%20Policy/00%20Content%20Security%20Policy.md '/Documentation/Guide/Common/Security_Considerations/#Content_Security_Policy'), refer to the [ExcelJS CSP Treats](/concepts/Common/Security%20Considerations/30%20Export%20Vulnerabilities/20%20ExcelJS%20CSP%20Threats.md '/Documentation/Guide/Common/Security_Considerations/#Export_Vulnerabilities/ExcelJS_CSP_Threats') section for more information about potential vulnerabilities.

- PDF: The <a href="https://github.com/parallax/jsPDF" target="_blank">jsPDF</a> v2.3.1+ library.

Expand All @@ -28,7 +28,7 @@ The following instructions show how to enable and configure client-side export:
<!-- Export to Excel -->
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-polyfill/7.4.0/polyfill.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/exceljs/4.4.0/exceljs.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>
Expand All @@ -46,7 +46,7 @@ The following instructions show how to enable and configure client-side export:
npm install jspdf

<!-- Export to Excel -->
npm install --save exceljs file-saver
npm install --save devextreme-exceljs-fork file-saver
npm i --save-dev @types/file-saver

<!-- tab: tsconfig.app.json -->
Expand All @@ -66,7 +66,7 @@ The following instructions show how to enable and configure client-side export:
npm install jspdf

<!-- Export to Excel -->
npm install --save exceljs file-saver
npm install --save devextreme-exceljs-fork file-saver

##### React

Expand All @@ -75,7 +75,7 @@ The following instructions show how to enable and configure client-side export:
npm install jspdf

<!-- Export to Excel -->
npm install --save exceljs file-saver
npm install --save devextreme-exceljs-fork file-saver

---

Expand Down Expand Up @@ -241,7 +241,7 @@ The following instructions show how to enable and configure client-side export:
<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver';
import { ExportingEvent } from 'devextreme/ui/data_grid';

Expand Down Expand Up @@ -307,7 +307,7 @@ The following instructions show how to enable and configure client-side export:

import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';

export default {
Expand Down Expand Up @@ -343,7 +343,7 @@ The following instructions show how to enable and configure client-side export:
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
import DataGrid, { Export } from 'devextreme-react/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -74,7 +74,7 @@ Since the **formats** property accepts an array, you can specify multiple format
import { Component } from '@angular/core';
import { exportDataGrid as exportDataGridToPdf } from 'devextreme/pdf_exporter';
import { jsPDF } from 'jspdf';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand Down Expand Up @@ -132,7 +132,7 @@ Since the **formats** property accepts an array, you can specify multiple format
import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf} from 'devextreme/pdf_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand Down Expand Up @@ -182,7 +182,7 @@ Since the **formats** property accepts an array, you can specify multiple format
import DataGrid, { Export } from 'devextreme-react/data-grid';
import { jsPDF } from 'jspdf';
import { exportDataGrid as exportDataGridToPdf} from 'devextreme/pdf_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand Down Expand Up @@ -251,8 +251,8 @@ The example below shows how to export DataGrid to CSV format.
component: e.component,
worksheet: worksheet
}).then(function() {
// https://github.com/exceljs/exceljs#writing-csv
// https://github.com/exceljs/exceljs#reading-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#writing-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#reading-csv
workbook.csv.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
});
Expand All @@ -276,7 +276,7 @@ The example below shows how to export DataGrid to CSV format.

<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand All @@ -294,8 +294,8 @@ The example below shows how to export DataGrid to CSV format.
component: e.component,
worksheet: worksheet
}).then(function() {
// https://github.com/exceljs/exceljs#writing-csv
// https://github.com/exceljs/exceljs#reading-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#writing-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#reading-csv
workbook.csv.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
});
Expand Down Expand Up @@ -344,7 +344,7 @@ The example below shows how to export DataGrid to CSV format.
<script>
import 'devextreme/dist/css/dx.light.css';
import { DxDataGrid, DxExport } from 'devextreme-vue/data-grid';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand All @@ -365,8 +365,8 @@ The example below shows how to export DataGrid to CSV format.
component: e.component,
worksheet: worksheet
}).then(function() {
// https://github.com/exceljs/exceljs#writing-csv
// https://github.com/exceljs/exceljs#reading-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#writing-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#reading-csv
workbook.csv.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
});
Expand All @@ -382,7 +382,7 @@ The example below shows how to export DataGrid to CSV format.
import React from 'react';
import 'devextreme/dist/css/dx.light.css';
import DataGrid, { Export } from 'devextreme-react/data-grid';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import { saveAs } from 'file-saver-es';
import { exportDataGrid } from 'devextreme/excel_exporter';

Expand All @@ -396,8 +396,8 @@ The example below shows how to export DataGrid to CSV format.
component: e.component,
worksheet: worksheet
}).then(function() {
// https://github.com/exceljs/exceljs#writing-csv
// https://github.com/exceljs/exceljs#reading-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#writing-csv
// https://github.com/DevExpress/devextreme-exceljs-fork#reading-csv
workbook.csv.writeBuffer().then(function(buffer) {
saveAs(new Blob([buffer], { type: "application/octet-stream" }), "Report.csv");
});
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -81,7 +81,7 @@ You can use this function to adjust column properties before export. In the foll
<!-- tab: app.component.ts -->
import { Component } from '@angular/core';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';

@Component({
Expand Down Expand Up @@ -146,7 +146,7 @@ You can use this function to adjust column properties before export. In the foll

import { DxDataGrid, DxExport, DxColumn } from 'devextreme-vue/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';

export default {
Expand Down Expand Up @@ -184,7 +184,7 @@ You can use this function to adjust column properties before export. In the foll
import React from 'react';
import 'devextreme/dist/css/dx.light.css';

import { Workbook } from 'exceljs';
import { Workbook } from 'devextreme-exceljs-fork';
import saveAs from 'file-saver';
import DataGrid, { Export, Column } from 'devextreme-react/data-grid';
import { exportDataGrid } from 'devextreme/excel_exporter';
Expand Down
Loading
Loading