PDF Export Overview

The GridPDFExport component provides options for exporting the content of the KendoReact Data Grid to PDF.

Getting Started

To enable the PDF export, wrap the Grid with the GridPDFExport component. To initiate the PDF export, use the save method.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn as Column, GridCell, GridToolbar } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';

import { sampleProducts } from './sample-products.jsx';

class CustomCell extends GridCell {
    render() {
        return (
            <td>
                <input disabled type="checkbox" checked={this.props.dataItem[this.props.field]} />
            </td>
        );
    }
}

class App extends React.Component {
    gridPDFExport;

    constructor(props) {
        super(props);

        this.state = this.createState(0, 5);
    }

    render() {
        const grid = (
            <Grid
                total={sampleProducts.length}
                pageSize={5}
                onPageChange={this.pageChange}
                data={this.state.items}
                skip={this.state.skip}
                pageable={true}
                style={{ height: '490px' }}
            >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.pdfExportRequested}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <Column field="ProductID" title="ID" width="40px" />
                <Column field="ProductName" title="Name" width="250px" />
                <Column field="Category.CategoryName" title="Category" />
                <Column field="UnitPrice" title="Price" width="80px" />
                <Column field="UnitsInStock" title="In stock" width="80px" />
                <Column field="Discontinued" title="Discontinued" width="120px" cell={CustomCell} />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport ref={(element) => { this.gridPDFExport = element; }} >
                    {grid}
                </GridPDFExport>
            </div>
        );
    }

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

    createState(skip, take) {
        return {
            items: sampleProducts.slice(skip, skip + take),
            skip: skip,
            pageSize: take
        };
    }

    exportPDF = () => {
        this.raisePDFExportRequestedFlag();
        this.gridPDFExport.save(this.state.items, this.lowerPDFExportRequestedFlag);
    }

    raisePDFExportRequestedFlag = () => {
        this.setState({ pdfExportRequested: true });
    }

    lowerPDFExportRequestedFlag = () => {
        this.setState({ pdfExportRequested: undefined });
    }
}

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

PDF Export Options

 /