Can you export custom cells rendering in the excel export for the grid.

[RS]

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" />

So in this example the date has been reformatted, however when the excel download is done, it still has the default date format from the Kendo Grid. 

Is it possible to have custom cells correctly formatted in the download? 

[Vessy]

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:

• https://stackblitz.com/edit/react-czanay-habf1x?file=app%2Fmain.jsx
•  

Another possible approach would be to loop over the data before the exporting and format the values of the target cells directly:

• https://www.telerik.com/kendo-react-ui/components/excelexport/customization/ 

Regards,
Vessy
Progress Telerik

[RS]

Thanks for this, however when I add this approach the sorting and filtering stops working? So how would this be fixed? 

[Vessy]

Hi, Rav, can you send me the current version of your project so I can examine what is causing the issue in it?

[RS]

I also have pagination which has: 

const initialState = {
    sort: [
        {
            field: 'date',
            dir: 'desc',
        },
    ],
    skip: 0,
    take: 10
};

The version of the npm packages are: 

    "@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",

[Vessy]

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?

• https://stackblitz.com/edit/react-czanay-9y5axb?file=app%2Fmain.jsx 

[RS]

Hi Vessy, that example does not show any filtering or sorting, I can see the below:

[Vessy]

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