Customizing Exported Columns

The GridPDFExport component enables you to specify the columns of the KendoReact Data Grid that will be exported.

To configure the columns that will be exported, include the GridColumn components inside the GridPDFExport component.

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 { sampleProducts } from './sample-products.jsx';

class App extends React.Component {
    gridPDFExport;

    constructor(props) {
        super(props);

        this.state = { pdfExportRequested: false };
    }

    render() {
        const grid = (
            <Grid data={sampleProducts} style={{ height: '490px' }} >
                <GridToolbar>
                    <button
                        title="Export PDF"
                        className="k-button k-primary"
                        onClick={this.exportPDF}
                        disabled={this.state.pdfExportRequested}
                    >
                        Export PDF
                    </button>
                </GridToolbar>
                <GridColumn field="ProductID" title="ID" width="40px" />
                <GridColumn field="ProductName" title="Name" width="250px" />
                <GridColumn field="Category.CategoryName" title="Category" />
                <GridColumn field="UnitPrice" title="Price" width="80px" />
                <GridColumn field="UnitsInStock" title="In stock" width="80px" />
            </Grid>
        );

        return (
            <div>
                {grid}
                <GridPDFExport ref={(element) => { this.gridPDFExport = element; }} >
                    <GridColumn field="ProductID" title="Product ID" width="40px" />
                    <GridColumn field="ProductName" title="Product Name" width="250px" />
                    <GridColumn field="QuantityPerUnit" title="Quantity Per Unit" />
                    {grid}
                </GridPDFExport>
            </div>
        );
    }

    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')
);

In this article

 /