Export Grid to Excel throws Error on Conditional Tools

0 Answers 160 Views
Excel Export Grid
Stephen
Top achievements
Rank 1
Stephen asked on 12 Jun 2023, 07:18 PM

Ok I actually started asking this question but I think I figured it out in the process of trying to get an example.  However, still posting here as I think it could help someone, plus the behavior seems a bit like a bug to me.

What I was trying to do is create a grid with a toolbar with various tools.  The list of available tools changes based on if the user is an admin or not (some tools are hidden for non-admins).  The basic pseudo-code I'm using for this is as follows:

<Grid ...other options>
    <GridToolbar>
        <Button ... />
        { isAdmin && <Button ... /> }
    </GridToolbar>
    { ... columns }
</Grid>

Basically, making the second button conditional on a variable (in this case a props bool variable that is passed to the component).  This works just fine on the page and it renders properly based on that variable.  However, when you export to Excel you get this error:

Uncaught TypeError: Cannot read properties of undefined (reading 'children')
    at ExcelExport._this.extractChild (ExcelExport.js:55:1)
    at ExcelExport.js:47:1
    at Array.map (<anonymous>)
    at ExcelExport._this.extractColumns (ExcelExport.js:45:1)
    at ExcelExport._this.extractChild (ExcelExport.js:54:1)
    at ExcelExport.js:47:1
    at Array.map (<anonymous>)
    at ExcelExport._this.extractColumns (ExcelExport.js:45:1)
    at ExcelExport.workbookOptions (ExcelExport.js:138:1)
    at ExcelExport.toDataURL (ExcelExport.js:119:1)

The toolbar shouldn't have anything to do with the Excel export so I would consider this a bug.  The workaround I have found is to return an empty div if the tool should not show up.  Like this:

<Grid ...other options>
    <GridToolbar>
        <Button ... />
        { isAdmin ? <Button ... /> : <div /> }
    </GridToolbar>
    { ... columns }
</Grid>
Doesn't seem like this should be necessary but it does work...
Filip
Telerik team
commented on 14 Jun 2023, 09:35 AM

Hi, Stephen,

At first glance this does indeed sound like an issue with the component, I tried to reproduce this error on my own using the provided logic and piecing together a sample to no avail.

Can you send a runnable example that reproduces this behavior so that I can investigate further?

Regards,
Filip
Stephen
Top achievements
Rank 1
commented on 14 Jun 2023, 04:27 PM

Sorry took a while to reproduce it.  Responded in support request, can respond here when resolved for benefit of others.
Filip
Telerik team
commented on 15 Jun 2023, 01:23 PM

Hi, Stephen,

Thank you for the reproducible example.

We have logged this as an issue that can be tracked and monitored here:

https://github.com/telerik/kendo-react/issues/1606

Once it has been fixed the item will be updated accordingly.

Regards,
Filip

No answers yet. Maybe you can help?

Tags
Excel Export Grid
Asked by
Stephen
Top achievements
Rank 1
Share this question
or