data grid footer cell excel export

Hi, Filip thanks for the replay.

I have another question please:

how can I manipulate the header and the data in the cell in the excel export for example I want the "Unit Price" header

will be "% Unit Price" or on the data cell add the "%" symbol to the value? 

Hello, Daniel,

It is possible to change the value of the header by specifying a group header template and passing it to the groupHeader prop like shown in this example:

https://stackblitz.com/edit/react-x37p2b?file=app/main.jsx

I have added the '$' symbol in the CustomGroupHeader component, any custom element can be rendered using this approach.

The exported data depends on the column title, whatever is passed as a value is also present in the exported file and it cannot be manipulated externally. 

I hope this helps.

Regards,Filip

I updated your provided example showcasing how this can be achieved there too:

https://stackblitz.com/edit/react-9cw5ko-btx4jb?file=app/main.jsx

Currently, this is the way to manipulate the header data and add new symbols.

Regards,
Philip

Thanks but it's not the answer to my problem.

can you tell me please why when I use custom cell for the column it's not exported the way in the custom cell.

for example :

I use custom cell for No. of Transactions column to render the data (20) and do some calculate percent (13.3)

and in the export I getting only 20 for this column

my code:

<ExcelExport ref={_export} fileName={"Overriden Transactions " + dateRange}>
                <Grid
                    className="dataGrid analyticsGrid"
                    data={fakeData.overridenTransatcions}
                    ref={_grid}
                    style={{ maxHeight: "400px", width: "100%" }}
                >
                    <Column
                        field="reason"
                        className="analyticsGridTd"
                        title={t("Override Reasons")}
                        headerCell={(props) => <td style={{ color: "black", fontSize: "13px", fontWeight: "bold" }} >{props.title}</td>}
                    />
                    <Column
                        field="total"
                        className="analyticsGridTd"
                        title={t("No. of Transactions")}
                        cell={(props) => {
                            var { dataItem } = props;

                            return <td className="analyticsGridTd" style={{ color: colors[props.dataIndex], fontWeight: "bold" }} >
                                {dataItem["total"] + ` (${((dataItem["total"] / fakeData.total) * 100).toFixed(1)}%)`}
                            </td>
                        }}
                        headerCell={(props) => <td style={{ color: "black", fontWeight: "bold", fontSize: "13px" }} >{props.title}</td>}
                    />
                </Grid>
            </ExcelExport>

Hi, Daniel,

This behavior is expected since this is a custom cell and Excel exports data, not everything visual. In this case, it is possible to achieve the desired result by using the cellOptions prop and setting the format, like shown in this example:

https://stackblitz.com/edit/react-9cw5ko-gxnwui?file=app/main.jsx

I hope this helps.

Regards,
Philip

Thanks but I try to use it and it's now working 

                <ExcelExportColumn
                    field="ordersAbandonRate"
                    title="Orders Abandon Rate"
                    cellOptions={{
                        format: '#,##0.00%',
                    }}
                />

                <ExcelExportColumn
                    field="retentionRate"
                    title="Retention Rate"
                    filter="numeric"
                    cellOptions={{
                        format: '#,##0.00%',
                    }}
                />

*edit

Thanks solved with parseFloat

Hi again.

maybe you know why when I add a date range to file name like 02/17/2022 - 02/17/2022 

the output file name is 02_17_2022 - 02_17_2022

?

Hi, Daniel,

Another way to add symbols to the exported data cells is by using the workBookOptions, and applying the required logic inside of the save function, in this case, we iterate over the rows and add a percentage symbol to the end of each cell's value like shown in this example:

https://stackblitz.com/edit/react-9cw5ko-brwh3f?file=app/main.jsx

More information on Workbook Customization can be found in the following article:

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

This behavior is expected because Excel does not allow filenames to contain a slash symbol. In order for the file to be saved as a valid one, the / symbols are converted to underscores. 

Regards,
Filip