Page Template

The GridPDFExport component enables you to specify a page template that will be additionally inserted into each PDF page of the KendoReact Data Grid.

Specifying a page template helps you position the content and add headers, footers, and other elements. To style the exported document, use CSS. During the PDF export, the template is positioned in a container with the specified paper size. To define a page template, specify the pageTemplate property of the GridPDFExport component.

When you use a page template, you are required to set the paperSize property.

import React from 'react';
import ReactDOM from 'react-dom';
import { Grid, GridColumn, GridToolbar } from '@progress/kendo-react-grid';
import { GridPDFExport } from '@progress/kendo-react-pdf';
import { products } from './products.js';

class PageTemplate extends React.Component {
    render() {
        return (
            <div style={{ position: "absolute", top: "10px", left: "10px" }}>
                Page {this.props.pageNum} of {this.props.totalPages}
            </div>
        );
    }
}

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

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

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

        return (
            <div>
                {grid}
                <GridPDFExport
                    pageTemplate={PageTemplate}
                    paperSize="A4"
                    margin="1.2cm"
                    landscape={true}
                    ref={pdfExport => this.gridPDFExport = pdfExport}
                >
                    {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 = () => {
        this.gridPDFExport.save(products, this.pdfExportDone);

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

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

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