All docs
V24.2
24.2
24.1
23.2
23.1
22.2
22.1
21.2
21.1
20.2
20.1
The page you are viewing does not exist in version 20.1.
19.2
The page you are viewing does not exist in version 19.2.
19.1
The page you are viewing does not exist in version 19.1.
18.2
The page you are viewing does not exist in version 18.2.
18.1
The page you are viewing does not exist in version 18.1.
17.2
The page you are viewing does not exist in version 17.2.

jQuery/JS Common - Object Structures - PdfExportDataGridProps

Properties that can be passed as a parameter to the exportDataGrid(options) method from the pdfExporter module.

import { DataGridExport_Options } from "devextreme/common/export/pdf"
Type:

Object

NOTE

The exportDataGrid(options) method requires the jsPDF v2.3.1+ library to export data and create PDF files.

JavaScript
HTML
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
  • <head>
  • <!-- ... -->
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
  • <!-- DevExtreme sources are referenced here -->
  • </head>

columnWidths

Specifies a custom width for the exported DataGrid columns.

Type:

Array<Number>

| undefined
Default Value: undefined

Uses the measure units that are specified in the constructor of the jsPDFDocument object.

The example below calls the exportDataGrid(options) method on a button click. This method applies specific widths to the grid columns.

JavaScript
HTML
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • columnWidths: [50, 40, 40, 40]
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
  • <head>
  • <!-- ... -->
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
  • <!-- DevExtreme sources are referenced here -->
  • </head>

component

A DataGrid instance. This setting is required.

Type:

DataGrid

| undefined
Default Value: undefined

customDrawCell

A function that allows you to draw cell content of the exported DataGrid. This function is executed before the cell is exported.

Type:

Function

Function parameters:
options:

Object

Information about the event.

Object structure:
Name Type Description
cancel

Boolean

Allows you to prevent default drawing logic.

doc

Object

An instance of the jsPDFDocument object.

gridCell

PdfDataGridCell

A DataGrid cell.

pdfCell

PdfCell

An object that describes a cell in a PDF file.

rect

Object

An object that contains information about the location of the cell and its dimensions. The object has the following structure: { x: numeric, y: numeric, h: numeric, w: numeric }.

View Demo

In the following example, this function adds an image to a cell:

index.js
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • customDrawCell: (e) => {
  • if (e.gridCell.rowType === 'data' && e.gridCell.column.dataField === 'Picture') {
  • doc.addImage(e.gridCell.value, 'PNG', e.rect.x, e.rect.y, e.rect.w, e.rect.h);
  • e.cancel = true;
  • }
  • },
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });

customizeCell

Customizes a cell in PDF after creation.

Type:

Function

Function parameters:
options:

Object

An object passed to this callback function.

Object structure:
Name Type Description
gridCell

PdfDataGridCell

A DataGrid cell.

pdfCell

PdfCell

An object that describes a cell in a PDF file.

View Demo

In the following example, this function changes the font size of the 'data' group row cells:

index.js
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • customizeCell: function(options) {
  • const { gridCell, pdfCell } = options;
  •  
  • if(gridCell.rowType === 'data') {
  • pdfCell.font = { size: 20 };
  • }
  • }
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
See Also

indent

Specifies the width of the indent of data rows relative to their group header row.

Type:

Number

Default Value: 0

This property uses the measure units that are specified in the constructor of the jsPDFDocument object.

Indent for Export to PDF

JavaScript
HTML
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • indent: 15
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
  • <head>
  • <!-- ... -->
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
  • <!-- DevExtreme sources are referenced here -->
  • </head>

jsPDFDocument

A jsPDF instance. This setting is required.

Type:

Object

| undefined
Default Value: undefined

loadPanel

Configures the load panel.

Type:

Object

The example below calls the exportDataGrid(options) method on a button click. This method enables the load panel and applies shading to the grid.

JavaScript
HTML
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • loadPanel: {
  • enabled: true,
  • shading: true,
  • shadingColor: "#808080"
  • }
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
  • <head>
  • <!-- ... -->
  • <script src="https://cdnjs.cloudflare.com/ajax/libs/jspdf/2.0.0/jspdf.umd.min.js"></script>
  • <!-- DevExtreme sources are referenced here -->
  • </head>

margin

Specifies the margin for the top, bottom, left, and right sides of the exported Grid.

Type:

Object

Uses the measure units that are specified in the constructor of the jsPDFDocument object.

index.js
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • margin: { top: 20, right: 20, bottom: 20, left: 20 },
  • jsPDFDocument: doc,
  • component: dataGrid,
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });
See Also

onRowExporting

A function that allows you to customize the height of the exported row. This function is executed before the row export.

Type:

Function

Function parameters:
options:

Object

Information about the event.

Object structure:
Name Type Description
rowCells

Array<PdfCell>

An array of cells of the exported row.

rowHeight

Number

Specifies the height of the exported row. If the specified value is less than the height of the text, the component increases the row height automatically.

index.js
  • $(function(){
  • $('#exportButton').dxButton({
  • // ...
  • onClick: function() {
  • const doc = new jsPDF();
  • DevExpress.pdfExporter.exportDataGrid({
  • jsPDFDocument: doc,
  • component: dataGrid,
  • onRowExporting: (e) => {
  • e.rowHeight = 20;
  • },
  • }).then(function() {
  • doc.save('Customers.pdf');
  • });
  • }
  • });
  •  
  • const dataGrid = $('#gridContainer').dxDataGrid({
  • // ...
  • }).dxDataGrid('instance');
  • });

repeatHeaders

Specifies whether to repeat the DataGrid column headers on each page.

Type:

Boolean

Default Value: true

selectedRowsOnly

Specifies whether or not to export only selected rows.

Type:

Boolean

Default Value: false

topLeft

Specifies the top left position of the DataGrid in the exported PDF document. Contains x and y properties. You can locate this position only below the page margins.

Type:

Object