Export Multiple Grids in the same PDF File with GridPDFExport

[Olabisi]

Hi,

How do I combine two separate grid tables in one PDF file and export them with one being on top of the other with some spacing between them? I'm trying to achieve this with GridPDFExport specifically.

[Vessy]

Hello,

Combining two separate grid tables into one PDF file using GridPDFExport in KendoReact can be achieved through a workaround, as the current functionality does not natively support exporting multiple grids into a single PDF document directly. Here's how you can do it:

Steps to Combine Grids into a Single PDF:

1. Wrap Both Grids in a Single Component: Create a component that includes both grids, arranged vertically with the desired spacing between them.

2. Use a Single PDF Export Component: Enclose the combined component within a single PDFExport component. This allows both grids to be exported as a single PDF.

Example Code:

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

const CombinedGrids = () => {
  const pdfExportComponent = useRef(null);

  const handleExport = () => {
    if (pdfExportComponent.current) {
      pdfExportComponent.current.save();
    }
  };

  return (
    <div>
      <button onClick={handleExport}>Export to PDF</button>
      <PDFExport ref={pdfExportComponent}>
        <div>
          <Grid data={[/* your data here */]}>
            <GridColumn field="field1" title="Field 1" />
            <GridColumn field="field2" title="Field 2" />
          </Grid>
          <div style={{ height: '20px' }}></div> {/* Add spacing between grids */}
          <Grid data={[/* your data here */]}>
            <GridColumn field="field3" title="Field 3" />
            <GridColumn field="field4" title="Field 4" />
          </Grid>
        </div>
      </PDFExport>
    </div>
  );
};

export default CombinedGrids;

Additional Considerations:

• Spacing: You can adjust the spacing between the grids by modifying the style of the <div> used for spacing.
• Styling: Ensure that any styles applied to the grids are suitable for PDF export, as some web styles might not render as expected in PDF.
• Limitations: This approach exports the current view of the grids. If you need to export all data across pages, additional handling will be required.

This workaround should help you achieve your desired layout. If you have further questions or encounter any issues, feel free to ask.

Regards,

Vessy
Progress Telerik