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.
class App extends React.Component {
    gridPDFExport;

    constructor(props) {
        super(props);

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

    render() {
        const grid = (
            <Grid
                total={products.length}
                pageSize={10}
                onPageChange={this.pageChange}
                data={this.state.items}
                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.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" />
            </Grid>
        );

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

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

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

    exportPDF = () => {
        this.raisePDFExportRequestedFlag();

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

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

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

const products = [{
    "ProductID" : 1,
    "ProductName" : "Chai",
    "SupplierID" : 1,
    "CategoryID" : 1,
    "QuantityPerUnit" : "10 boxes x 20 bags",
    "UnitPrice" : 18.0000,
    "UnitsInStock" : 39,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 10,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 1,
        "CategoryName" : "Beverages",
        "Description" : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    "ProductID" : 2,
    "ProductName" : "Chang",
    "SupplierID" : 1,
    "CategoryID" : 1,
    "QuantityPerUnit" : "24 - 12 oz bottles",
    "UnitPrice" : 19.0000,
    "UnitsInStock" : 17,
    "UnitsOnOrder" : 40,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 1,
        "CategoryName" : "Beverages",
        "Description" : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    "ProductID" : 3,
    "ProductName" : "Aniseed Syrup",
    "SupplierID" : 1,
    "CategoryID" : 2,
    "QuantityPerUnit" : "12 - 550 ml bottles",
    "UnitPrice" : 10.0000,
    "UnitsInStock" : 13,
    "UnitsOnOrder" : 70,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 4,
    "ProductName" : "Chef Anton's Cajun Seasoning",
    "SupplierID" : 2,
    "CategoryID" : 2,
    "QuantityPerUnit" : "48 - 6 oz jars",
    "UnitPrice" : 22.0000,
    "UnitsInStock" : 53,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 5,
    "ProductName" : "Chef Anton's Gumbo Mix",
    "SupplierID" : 2,
    "CategoryID" : 2,
    "QuantityPerUnit" : "36 boxes",
    "UnitPrice" : 21.3500,
    "UnitsInStock" : 0,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : true,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 6,
    "ProductName" : "Grandma's Boysenberry Spread",
    "SupplierID" : 3,
    "CategoryID" : 2,
    "QuantityPerUnit" : "12 - 8 oz jars",
    "UnitPrice" : 25.0000,
    "UnitsInStock" : 120,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 7,
    "ProductName" : "Uncle Bob's Organic Dried Pears",
    "SupplierID" : 3,
    "CategoryID" : 7,
    "QuantityPerUnit" : "12 - 1 lb pkgs.",
    "UnitPrice" : 30.0000,
    "UnitsInStock" : 15,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 10,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 7,
        "CategoryName" : "Produce",
        "Description" : "Dried fruit and bean curd"
    }
}, {
    "ProductID" : 8,
    "ProductName" : "Northwoods Cranberry Sauce",
    "SupplierID" : 3,
    "CategoryID" : 2,
    "QuantityPerUnit" : "12 - 12 oz jars",
    "UnitPrice" : 40.0000,
    "UnitsInStock" : 6,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 9,
    "ProductName" : "Mishi Kobe Niku",
    "SupplierID" : 4,
    "CategoryID" : 6,
    "QuantityPerUnit" : "18 - 500 g pkgs.",
    "UnitPrice" : 97.0000,
    "UnitsInStock" : 29,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : true,
    "Category" : {
        "CategoryID" : 6,
        "CategoryName" : "Meat/Poultry",
        "Description" : "Prepared meats"
    }
}, {
    "ProductID" : 10,
    "ProductName" : "Ikura",
    "SupplierID" : 4,
    "CategoryID" : 8,
    "QuantityPerUnit" : "12 - 200 ml jars",
    "UnitPrice" : 31.0000,
    "UnitsInStock" : 31,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 8,
        "CategoryName" : "Seafood",
        "Description" : "Seaweed and fish"
    }
}, {
    "ProductID" : 11,
    "ProductName" : "Queso Cabrales",
    "SupplierID" : 5,
    "CategoryID" : 4,
    "QuantityPerUnit" : "1 kg pkg.",
    "UnitPrice" : 21.0000,
    "UnitsInStock" : 22,
    "UnitsOnOrder" : 30,
    "ReorderLevel" : 30,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 4,
        "CategoryName" : "Dairy Products",
        "Description" : "Cheeses"
    }
}, {
    "ProductID" : 12,
    "ProductName" : "Queso Manchego La Pastora",
    "SupplierID" : 5,
    "CategoryID" : 4,
    "QuantityPerUnit" : "10 - 500 g pkgs.",
    "UnitPrice" : 38.0000,
    "UnitsInStock" : 86,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 4,
        "CategoryName" : "Dairy Products",
        "Description" : "Cheeses"
    }
}, {
    "ProductID" : 13,
    "ProductName" : "Konbu",
    "SupplierID" : 6,
    "CategoryID" : 8,
    "QuantityPerUnit" : "2 kg box",
    "UnitPrice" : 6.0000,
    "UnitsInStock" : 24,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 5,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 8,
        "CategoryName" : "Seafood",
        "Description" : "Seaweed and fish"
    }
}, {
    "ProductID" : 14,
    "ProductName" : "Tofu",
    "SupplierID" : 6,
    "CategoryID" : 7,
    "QuantityPerUnit" : "40 - 100 g pkgs.",
    "UnitPrice" : 23.2500,
    "UnitsInStock" : 35,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 7,
        "CategoryName" : "Produce",
        "Description" : "Dried fruit and bean curd"
    }
}, {
    "ProductID" : 15,
    "ProductName" : "Genen Shouyu",
    "SupplierID" : 6,
    "CategoryID" : 2,
    "QuantityPerUnit" : "24 - 250 ml bottles",
    "UnitPrice" : 15.5000,
    "UnitsInStock" : 39,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 5,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 2,
        "CategoryName" : "Condiments",
        "Description" : "Sweet and savory sauces, relishes, spreads, and seasonings"
    }
}, {
    "ProductID" : 16,
    "ProductName" : "Pavlova",
    "SupplierID" : 7,
    "CategoryID" : 3,
    "QuantityPerUnit" : "32 - 500 g boxes",
    "UnitPrice" : 17.4500,
    "UnitsInStock" : 29,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 10,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 3,
        "CategoryName" : "Confections",
        "Description" : "Desserts, candies, and sweet breads"
    }
}, {
    "ProductID" : 17,
    "ProductName" : "Alice Mutton",
    "SupplierID" : 7,
    "CategoryID" : 6,
    "QuantityPerUnit" : "20 - 1 kg tins",
    "UnitPrice" : 39.0000,
    "UnitsInStock" : 0,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : true,
    "Category" : {
        "CategoryID" : 6,
        "CategoryName" : "Meat/Poultry",
        "Description" : "Prepared meats"
    }
}, {
    "ProductID" : 18,
    "ProductName" : "Carnarvon Tigers",
    "SupplierID" : 7,
    "CategoryID" : 8,
    "QuantityPerUnit" : "16 kg pkg.",
    "UnitPrice" : 62.5000,
    "UnitsInStock" : 42,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 8,
        "CategoryName" : "Seafood",
        "Description" : "Seaweed and fish"
    }
}, {
    "ProductID" : 19,
    "ProductName" : "Teatime Chocolate Biscuits",
    "SupplierID" : 8,
    "CategoryID" : 3,
    "QuantityPerUnit" : "10 boxes x 12 pieces",
    "UnitPrice" : 9.2000,
    "UnitsInStock" : 25,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 5,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 3,
        "CategoryName" : "Confections",
        "Description" : "Desserts, candies, and sweet breads"
    }
}, {
    "ProductID" : 20,
    "ProductName" : "Sir Rodney's Marmalade",
    "SupplierID" : 8,
    "CategoryID" : 3,
    "QuantityPerUnit" : "30 gift boxes",
    "UnitPrice" : 81.0000,
    "UnitsInStock" : 40,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 3,
        "CategoryName" : "Confections",
        "Description" : "Desserts, candies, and sweet breads"
    }
}, {
    "ProductID" : 21,
    "ProductName" : "Sir Rodney's Scones",
    "SupplierID" : 8,
    "CategoryID" : 3,
    "QuantityPerUnit" : "24 pkgs. x 4 pieces",
    "UnitPrice" : 10.0000,
    "UnitsInStock" : 3,
    "UnitsOnOrder" : 40,
    "ReorderLevel" : 5,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 3,
        "CategoryName" : "Confections",
        "Description" : "Desserts, candies, and sweet breads"
    }
}, {
    "ProductID" : 22,
    "ProductName" : "Gustaf's Knäckebröd",
    "SupplierID" : 9,
    "CategoryID" : 5,
    "QuantityPerUnit" : "24 - 500 g pkgs.",
    "UnitPrice" : 21.0000,
    "UnitsInStock" : 104,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 5,
        "CategoryName" : "Grains/Cereals",
        "Description" : "Breads, crackers, pasta, and cereal"
    }
}, {
    "ProductID" : 23,
    "ProductName" : "Tunnbröd",
    "SupplierID" : 9,
    "CategoryID" : 5,
    "QuantityPerUnit" : "12 - 250 g pkgs.",
    "UnitPrice" : 9.0000,
    "UnitsInStock" : 61,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 25,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 5,
        "CategoryName" : "Grains/Cereals",
        "Description" : "Breads, crackers, pasta, and cereal"
    }
}, {
    "ProductID" : 24,
    "ProductName" : "Guaraná Fantástica",
    "SupplierID" : 10,
    "CategoryID" : 1,
    "QuantityPerUnit" : "12 - 355 ml cans",
    "UnitPrice" : 4.5000,
    "UnitsInStock" : 20,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 0,
    "Discontinued" : true,
    "Category" : {
        "CategoryID" : 1,
        "CategoryName" : "Beverages",
        "Description" : "Soft drinks, coffees, teas, beers, and ales"
    }
}, {
    "ProductID" : 25,
    "ProductName" : "NuNuCa Nuß-Nougat-Creme",
    "SupplierID" : 11,
    "CategoryID" : 3,
    "QuantityPerUnit" : "20 - 450 g glasses",
    "UnitPrice" : 14.0000,
    "UnitsInStock" : 76,
    "UnitsOnOrder" : 0,
    "ReorderLevel" : 30,
    "Discontinued" : false,
    "Category" : {
        "CategoryID" : 3,
        "CategoryName" : "Confections",
        "Description" : "Desserts, candies, and sweet breads"
    }
}];

ReactDOM.render(
    <App />,
    document.querySelector('my-app')
);
<style>
  /*
      Use the DejaVu Sans font for display and embedding in the PDF file.
      The standard PDF fonts have no support for Unicode characters.
  */
  div {
    font-family: "DejaVu Sans", "Arial", sans-serif;
    font-size: 12px;
  }

  /*
    The examples load DejaVu Sans from the Kendo CDN. Other fonts
    should be hosted from your application.

    Official site of the Deja Vu Fonts project:
    https://dejavu-fonts.github.io/
  */
  @font-face {
    font-family: "DejaVu Sans";
    src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-weight: bold;
    src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Bold.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-style: italic;
    src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
  }

  @font-face {
    font-family: "DejaVu Sans";
    font-weight: bold;
    font-style: italic;
    src: url("https://kendo.cdn.telerik.com/2017.2.621/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf") format("truetype");
  }
</style>

In this article

 /