Excel Export on dynamically created Grid

[Mihai]

Hello,

We have a dynamically created Grid for which we need to have an Excel Export. The code below returns an empty excel file (no data). What are we doing wrong?

// Parent file

import ClickTrackingGrid from './common/Grid';

import { ExcelExport } from '@progress/kendo-react-excel-export';

export default class EmailClients extends React.Component {
     _export;

     constructor(props) {
             super(props);

              this.export = this.export.bind(this);

    }

    export() {
             this._export.save();
    }

    render() {

             <button title="Export Excel" className="k-button k-primary" onClick={this.export}>Export to Excel</button>

             <ExcelExport data={this.props.ctGeographGeoFigures} ref={(exporter) => { this._export = exporter; }}>
                  <ClickTrackingGrid dataSource={this.props.ctGeographGeoFigures} />
             </ExcelExport>

    }

}

// ClickTrackingGrid file

import React from 'react';
import { Grid, GridColumn } from '@progress/kendo-grid-react-wrapper';

export default class ClickTrackingGrid extends React.Component {
       render(){
                 const { dataSource } = this.props;
                 var allColumns = dataSource.length > 0 ? Object.keys(dataSource[0]) : [];
                 var columnsToShow = allColumns.map((item,i) => <GridColumn field={item} key={i} />);
                 return (
                           <Grid dataSource={dataSource}>
                                        { columnsToShow }
                           </Grid>
                );
      }
}

[Vasil]

Hello Mihai,

The export package is built to work with other native react components including the kendo-react-grid.
https://www.telerik.com/kendo-react-ui/components/grid/excel-export/

In case you are using the react wrapper of the jQuery grid I would suggest you to use the jquery kendo export infrastructure.

Mixing the wrappers with the native components will not work for the excel and pdf exports.

Regards,
Vasil
Progress Telerik

[Mihai]

Hello Vasil,

Can you please check the example you have posted. I have downloaded it, installed the packages and when I run it locally it is returning an empty result set on excel export. Please see attached screen shot.

https://stackblitz.com/run/?file=app%2Fmain.js

Thanks & Regards,

Mihai

[Mihai]

The link I posted is wrong. Is there no way to edit a post?

Here is the link to the app with the excel export not working:

https://zusf9f.run.stackblitz.io

Thanks & Regards,

Mihai

[Mihai]

The I posted is wrong. Is there no way to edit a post?

Here is the link to the app with the excel feature not working:

https://zusf9f.run.stackblitz.io

Thanks & Regards,

Mihai

[Mihai]

I have also implemented your example from your documentation at:

https://www.telerik.com/kendo-react-ui/components/grid/excel-export/

"Passing the Grid Columns"

and it is returning an empty result set on export, see picture attached. 

Can you please provide a working example of an excel export grid with the columns passed dynamically?

Thanks & Regards,

Mihai

[Vasil]

Hi,

I can't open your code for some reason. But if I am guessing correct, you are placing the columns dynamically and changing them prior the export.
If that is the case, there is bug that will be fixed, and meanwhile there is different official way of passing the columns. Please follow these issue for further information:
https://github.com/telerik/kendo-react/issues/58

Regards,
Vasil
Progress Telerik