[REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Our blazing fast Grid component built with pure JavaScript


Post Reply
User avatar
Vitaly Kroivets
Posts: 3
Joined: Thu Sep 24, 2020 7:49 pm

[REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Post by Vitaly Kroivets »

Hi everyone.
I hope you are doing well.

I favorite the Bryntum products because it supports the beautiful and powerful features that I wanted and imagined.
Btw I'm facing problems while integrate the PDF and Excel export functions with our Reactjs app.
Exactly, I don't know how to integrate them and where should I start.
It would be very appreciated if you help me to solve this problem.
And any basic sample codes are also appreciated..

Best regards.

Thanks.


User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 171
Joined: Sun Jul 12, 2020 8:22 pm

Re: [REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Post by fabio.policeno »

Hi Vitaly,

Welcome to Bryntum forum!

We are so glad that you favorite Bryntum products, it's a pleasure for us to create powerful and rich components. Thank's for your feedback!

It's a good idea to have a demo for grid using React for PDF and Excel export, thank you for your suggestion, I just created a ticket for it and you can track to know the status: https://github.com/bryntum/support/issues/1585

Currently the Grid for react specifically doesn't support these features because we need to apply some adjusts, but the good news is that you can do yourself and after the ticket above be closed, you can remove your temporary changes.

Here are the necessary changes you can apply for your React project to grid have PDF and Excel exporter ready to use:
Let's change the React Grid basic example (Grid/examples/react/javascript/basic).

First we need to change the wrap created to work with React at Grid/examples/react/_shared/src/lib/BryntumGrid.js (around line 29). Add two features to features array, like this:

Code: Select all

features = [
    'cellEditFeature',
    'cellTooltipFeature',
    'columnDragToolbarFeature',
    'columnLinesFeature',
    'columnPickerFeature',
    'columnReorderFeature',
    'columnResizeFeature',
    'contextMenuFeature',
    'excelExporterFeature', // add
    'filterBarFeature',
    'filterFeature',
    'groupFeature',
    'groupSummaryFeature',
    'headerContextMenuFeature',
    'pdfExportFeature', // add
    'quickFindFeature',
    'regionResizeFeature',
    'rowReorderFeature',
    'searchFeature',
    'sortFeature',
    'stripeFeature',
    'summaryFeature',
    'treeFeature'
];

And add the buttons on header to call the features (Grid/examples/react/javascript/basic/src/components/Header.js):

Code: Select all

...
<BryntumWidget
    type      = "button"
    text      = "Export to PDF"
    onClick   = {props.onExportPdfClick}
    container = "tools"
/>
<BryntumWidget
    type      = "button"
    text      = "Export to Excel"
    onClick   = {props.onExportExcelClick}
    container = "tools"
/>
...

And add the features for your Grid instance (Grid/examples/react/javascript/basic/src/containers/Main.js):

Code: Select all

<BryntumGrid
    ...
    pdfExportFeature={{
        exportServer: 'https://dev.bryntum.com:8082/'
    }}
    excelExporterFeature={true}
/>

Add the functions to call the exports:

Code: Select all

...
handleExportPdfClick = () => {
    this.refs.grid.pdfExportFeature.showExportDialog();
};

handleExportExcelClick = () => {
    this.refs.grid.excelExporterFeature.export();
};
...
<Header
    ...
    onExportPdfClick={this.handleExportPdfClick.bind(this)}
    onExportExcelClick={this.handleExportExcelClick.bind(this)}
/>
...

For the excel exporter we need to add a external lib zipcelx.js. So just copy it from Scheduler/examples/exporttoexcel/zipcelx.js to Grid/examples/react/javascript/basic/zipcelx.js and add it to load on your project.

After that, using the terminal, navigate to Grid/examples/react/javascript/basic and run the npm install to update dependencies:

Code: Select all

$ cd Grid/examples/react/javascript/basic
$ npm i

Finally, run the app:

Code: Select all

$ npm start

If you have any question, please let us know.

Fabio Jr. Policeno
Core Developer


User avatar
Vitaly Kroivets
Posts: 3
Joined: Thu Sep 24, 2020 7:49 pm

Re: [REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Post by Vitaly Kroivets »

Hi Fabio.

Your answer helped me.

Thanks very much.

Vitaly.


User avatar
Jokovich
Posts: 2
Joined: Wed Oct 07, 2020 12:48 pm
Location: NY
Contact:

Re: [REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Post by Jokovich »

Found a lot of useful information, glad to join your community!

Last edited by Jokovich on Wed Oct 07, 2020 3:40 pm, edited 1 time in total.

User avatar
fabio.policeno
Core Developer
Core Developer
Posts: 171
Joined: Sun Jul 12, 2020 8:22 pm

Re: [REACT] How to integrate the PDF and Excel export features in the Bryntum Grid for React.js version

Post by fabio.policeno »

Hi Jokovich, you are welcome. We are glad for your feedback and you are very welcome to the community :)

Fabio Jr. Policeno
Core Developer


Post Reply