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>
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
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
Regards,
Filip