Our blazing fast Grid component built with pure JavaScript


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.


Post by fabio.mazza »

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:

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):

...
<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):

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

Add the functions to call the exports:

...
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:

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

Finally, run the app:

$ npm start

If you have any question, please let us know.

Best regards,
Fabio


Post by Vitaly Kroivets »

Hi Fabio.

Your answer helped me.

Thanks very much.

Vitaly.


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.

Post by fabio.mazza »

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

Best regards,
Fabio


Post Reply