Export multiple grids to PDF

[Fabian Ehrlich]

Hi,

I have 5 grids on page, is it possible to export all of them to one PDF file?

Regards

Fabian

[Pavithra Subramaniyam]

Hi Fabian, 

Thanks for contacting Syncfusion Support. 

We have checked your query and You can achieve your requirement by using ‘pdfExport()’ method in the promise.then() function of previous grid exporting. We have prepared a simple sample based on your requirement. Please refer to the below code example, Documentation link and sample link. 

 

[index.tsx] 

class App extends React.Component<{}, {}> { 

    public toolbar = ['PdfExport']; 

    public firstGrid: GridComponent; 

    public secondGrid: GridComponent; 

    public toolbarClick = (args: ClickEventArgs) => { 

        if (args.item.id === 'FirstGrid_pdfexport') { 

            let firstGridPdfExport: Promise<Object> = this.firstGrid.pdfExport({}, true); 

            firstGridPdfExport.then((pdfData: Object) => { 

                this.secondGrid.pdfExport({}, false, pdfData); 

            }); 

        } 

    } 

    render() { 

        return ( 

            <div> 

                <div><b>First Grid:</b></div> 

                <GridComponent id='FirstGrid' dataSource={data.slice(0, 5)} toolbar={this.toolbar} allowPdfExport={true} toolbarClick={this.toolbarClick.bind(this)} ref={g => this.firstGrid = g}> 

                    <ColumnsDirective> 

                      .    .    . 

                    </ColumnsDirective> 

                    <Inject services={[Toolbar, PdfExport]}></Inject> 

                </GridComponent> 

                <div><b>Second Grid:</b></div> 

                <GridComponent id='SecondGrid' dataSource={employeeData.slice(0, 5)} allowPdfExport={true} ref={g => this.secondGrid = g}> 

                    <ColumnsDirective> 

                        .  .  . 

                    </ColumnsDirective> 

                    <Inject services={[PdfExport]}></Inject> 

                </GridComponent> 

            </div> 

        ); 

    } 

} 

ReactDOM.render(<App />, document.getElementById('grid')); 

Documentation: https://ej2.syncfusion.com/react/documentation/grid/pdf-exporting.html#multiple-exporting  

Sample               : https://plnkr.co/edit/C0WERZ4gsqKeIXSrNFHZ?p=preview  

Regards, 

Pavithra S. 

[Fabian Ehrlich]

Hi,

Thank you for reply. It works, but is it possible to merge pages in pdf into one? Currently the output pdf file contains two separate pages.

Regards

Fabian

[Pavithra Subramaniyam]

Hi Fabian, 

We have created a support incident under your account and in that incident we have updated the response for your query. Please log on to our support website to check for better follow up on further updates. 

http://www.syncfusion.com/Account/Logon?ReturnUrl=%2fsupport%2fdirecttrac 

Regards, 

Pavithra S. 

[talha hameed]

Hi,

Is it possible to add multiple grids on single pdf page?

I have three girds and want to add them all to single pdf page.

Thanks

[Balaji Sekar]

Hi Fabian, 

Query :  Is it possible to add multiple grids on single pdf page? 

 

Yes, we are able to export the multiple Grids in the single PDF page and we have already discussed this requirement in our Documentation. Please refer the below Documentation for more information. 

 

Help Documentation: https://ej2.syncfusion.com/react/documentation/grid/pdf-export/?no-cache=1#multiple-exporting 

Please get back to us, if you need further assistance. 

Regards, 

Balaji Sekar.