Hi
Felipe Lustosa,
Greetings
from Syncfusion support.
When
exporting data from the Syncfusion Grid to PDF or Excel, the exported documents
are typically formatted using the format property defined in each Grid
column. If you are using the formatter property to format columns within
the Grid display, this custom formatting will not automatically be applied to
the exported documents.
To
include custom formatting when exporting the Grid to PDF or Excel, you have two
options:
Option
1: Using format Property
Ensure
that the format property is used in the Grid column definition, as this will
automatically apply the specified format during the export. Please refer to the
below code example, sample and documentation link for more information.
|
Index.js
var formatOptions = { type: 'date', format: 'M/d/yyyy' };
<GridComponent
id="DefaultExport"
dataSource={hierarchyOrderdata}
height={315}
ref={(grid) => (gridInstance = grid)}
toolbar={toolbarOptions}
allowExcelExport={true}
allowPdfExport={true}
toolbarClick={toolbarClick.bind(this)}
>
………………………..
<ColumnDirective
field="OrderDate"
headerText="Due date"
width="100"
textAlign="right"
format={formatOptions}
/>
</ColumnsDirective>
<Inject
services={[Toolbar, ExcelExport, PdfExport, Group, Sort, Filter]}
/>
</GridComponent>
|
Sample: Qrdpym
(forked) - StackBlitz
Documentation
Link:
Date-formatting
Option
2: Using formatter property with excelQueryCellInfo and pdfQueryCellInfo events
If
you need to maintain custom formatting defined in the formatter
property, you can utilize the excelQueryCellInfo and pdfQueryCellInfo
events to manually apply the same formatting to the exported cells. Please
refer to the below code example and sample for more details on this
implementation.
|
App.js
function getValue(columns, rows) {
return new Date(rows[columns.field]).toLocaleDateString();
}
function exportQueryCellInfo(args) {
if (args.column.field === 'OrderDate') {
// Formatting the exported document cells
args.value = args.column.formatter(args.column, args.data);
}
}
<GridComponent
id="DefaultExport"
dataSource={hierarchyOrderdata}
height={315}
ref={(grid) => (gridInstance = grid)}
toolbar={toolbarOptions}
allowExcelExport={true}
allowPdfExport={true}
excelQueryCellInfo={exportQueryCellInfo.bind(this)}
pdfQueryCellInfo={exportQueryCellInfo.bind(this)}
toolbarClick={toolbarClick.bind(this)}
>
<ColumnsDirective>
…………………………………..
<ColumnDirective
field="OrderDate"
headerText="Due date"
width="100"
textAlign="right"
formatter={getValue}
/>
</ColumnsDirective>
<Inject
services={[Toolbar, ExcelExport, PdfExport, Group, Sort, Filter]}
/>
</GridComponent>
|
Sample: Qrdpym
(forked) - StackBlitz
By
defining your formatting logic either through the format property or by
handling the excelQueryCellInfo event, you can ensure that exported documents
reflect the desired format as displayed in the Grid. Adjust the event handling
function to match your specific formatting requirements.
API
References:
format
pdfQueryCellInfo
excelQueryCellInfo
If
you need any other assistance or have additional questions, please feel free to
contact us.
Regards
Aishwarya
R
