Exporting All Pages

The GridPDFExport component enables you to export all Grid pages to PDF.

To export all pages of the KendoReact Data Grid, pass them as the data argument of the save method.

  • The export of all Grid pages requires all records, including the off-screen ones, to be rendered at once.
  • The exact maximum number of exportable rows varies depending on the browser, system resources, template complexity, and other factors.
  • Verify your own worst-case scenarios in each browser you intend to support.
import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridToolbar } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';
import { products } from './products.js';

class App extends React.Component {
    gridPDFExport;
    total = products.length;
    pageSize = 5;

    state = {
        data: products.slice(0, this.pageSize),
        skip: 0,
        exporting: false
    };

    render() {
        const grid = (
            <Grid
                data={this.state.data}
                pageable={true}
                onPageChange={this.pageChange}
                pageSize={this.pageSize}
                total={this.total}
                skip={this.state.skip}
            >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.exporting}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="ID" width="50px" />
                <Column field="ProductName" title="Name" width="300px" />
                <Column field="Category.CategoryName" title="Category" />
                <Column field="UnitPrice" title="Price" />
                <Column field="UnitsInStock" title="In stock" />
                <Column field="Discontinued" title="Discontinued" />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport
                    ref={pdfExport => this.gridPDFExport = pdfExport}
                    margin="1cm"
                >
                    {grid}
                </GridPDFExport>
            </div>
        );
    }

    pageChange = (event) => {
        this.setState(this.createState(event.page.skip, event.page.take));
    }

    createState(skip, take) {
        return {
            data: products.slice(skip, skip + take),
            skip: skip
        };
    }

    exportPDF = () => {
        // Simulate a response from a web request.
        setTimeout(
            () => { this.gridPDFExport.save(products, this.pdfExportDone); },
            250
        );

        this.setState({ exporting: true });
    }

    pdfExportDone = () => {
        this.setState({ exporting: false });
    }
}

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
In this article
 /