New to Kendo UI for Angular? Start a free 30-day trial
PDFTemplateDirective
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.
@Component({
selector: 'my-app',
template: `
<kendo-grid [data]="gridData">
<ng-template kendoGridToolbarTemplate>
<button kendoGridPDFCommand icon="file-pdf">Export to PDF</button>
</ng-template>
<kendo-grid-column field="ProductName">
</kendo-grid-column>
<kendo-grid-column field="UnitPrice">
</kendo-grid-column>
<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 }}
</div>
</ng-template>
</kendo-grid-pdf>
</kendo-grid>
`
})
class AppComponent {
public gridData = [{
"ProductID": 1,
"ProductName": "Chai",
"UnitPrice": 18.0000
}, {
"ProductID": 2,
"ProductName": "Chang",
"UnitPrice": 19.0000
}
];
}
Selector
[kendoGridPDFTemplate]
