Is it possible to export your custom cells rendering for the excel export.
For example
const Cell = (props: any) => {
const endDate = moment(props?.endDateData).format("D MMMM YYYY hh:mm:ss")
return (
<td>
{endDate}
</td>
)
};
const CustomCell = (props: any) => <Cell {...props} />;
// The column in the grid
<Column field="endDateData" title="End" cell={CustomCell} filter="date" />
Is it possible to have custom cells correctly formatted in the download?
1 Answer, 1 is accepted
Hello, Rav,
That occurs as the excel export is exporting the data, not the formatting and the styles. This is because the HTML elements and styles and not 100% with excel cells.
In this case, we recommend parsing the strings to date objects as soon as they are received from the server. This will allow to directly use the `cellOptions.format` prop of the column instead of a custom cell, it will allow work on the Excel file, and it will work if in the future the application needs sorting or filtering:
Another possible approach would be to loop over the data before the exporting and format the values of the target cells directly:
Regards,
Vessy
Progress Telerik
Love the Telerik and Kendo UI products and believe more people should try them? Invite a fellow developer to become a Progress customer and each of you can get a $50 Amazon gift voucher.
Rank 1
Hi, Rav, can you send me the current version of your project so I can examine what is causing the issue in it?
Rank 1
const initialState = {
sort: [
{
field: 'date',
dir: 'desc',
},
],
skip: 0,
take: 10
}; "@progress/kendo-data-query": "^1.5.5",
"@progress/kendo-licensing": "^1.2.0",
"@progress/kendo-react-charts": "^4.9.0",
"@progress/kendo-react-data-tools": "^4.9.0",
"@progress/kendo-react-dateinputs": "^4.9.0",
"@progress/kendo-react-excel-export": "^4.12.0",
"@progress/kendo-react-grid": "^4.9.0",
"@progress/kendo-react-intl": "^4.9.0",
"@progress/kendo-theme-bootstrap": "^4.41.2",
Hi, Rav, I have prepared a sample exporting all pages of the Grid with formatted dates and enabled paging and sorting of the Grid. Can you take a look at it and see if it is working for you?
Rank 1
Hi, Rav,
It seems I have not saved the latest version when testing the scenario, apologies for that. Below is the proper link for the prepared sample:
https://stackblitz.com/edit/react-wbn7vb-zxly1b?file=index.js