New to Kendo UI for Angular? Start a free 30-day trial


Represents the PDF page template of the Grid that helps to customize the PDF pages. To define a page template, nest an <ng-template> tag with the kendoGridPDFTemplate directive inside <kendo-grid-pdf>.

The template context provides the following fields:

  • pageNumber—Defines PDF page number.
  • totalPages—Defines the total number of PDF pages.

    selector: 'my-app',
    template: `
        <kendo-grid [data]="gridData">
            <ng-template kendoGridToolbarTemplate>
                <button kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
            <kendo-grid-column field="ProductName">
             <kendo-grid-column field="UnitPrice">
            <kendo-grid-pdf fileName="Products.pdf" paperSize="A4" [margin]="{ top: '1cm', left: '1cm', right: '1cm', bottom: '1cm' }">
                <ng-template kendoGridPDFTemplate let-pageNum="pageNum" let-totalPages="totalPages">
                    <div style="position: absolute;top: 5px; left: 5px;">
                        Page {{ pageNum }} of {{ totalPages }}

class AppComponent {
    public gridData = [{
        "ProductID": 1,
        "ProductName": "Chai",
        "UnitPrice": 18.0000
      }, {
        "ProductID": 2,
        "ProductName": "Chang",
        "UnitPrice": 19.0000



In this article

Not finding the help you need?