Page Templates

When you request multi-page output through the forcePageBreak or paperSize, you can additionally specify a page template.

This template will be inserted into each page before producing the output. You can easily position it relatively to the page with CSS. The template can be a function, or a Kendo UI template, and it receives the number of the current page (pageNum) and the total number of pages (totalPages).

    <script type="x/kendo-template" id="page-template">
        <div class="page-template">
            <div class="header">
                <div style="float: right">Page #:pageNum# of #:totalPages#</div>
                This is a header.
            <div class="footer">
                This is a footer.
                Page #:pageNum# of #:totalPages#

    <div id="grid"></div>

            Make sure everything in the page template is absolutely positioned.
            All positions are relative to the page container.
        .page-template > * {
            position: absolute;
            left: 20px;
            right: 20px;
            font-size: 90%;
        .page-template .header {
            top: 20px;
            border-bottom: 1px solid #000;
        .page-template .footer {
            bottom: 20px;
            border-top: 1px solid #000;

            Use the DejaVu Sans font for display and embedding in the PDF file.
            The standard PDF fonts have no support for Unicode characters.
        .k-grid {
            font-family: "DejaVu Sans", "Arial", sans-serif;
            width: 400px;


            dataSource: {
                type: "odata",
                transport: {
                    read: {
                        url: "",
            scrollable: false,
            columns: [{
              title: "Name",
              field: "ProductName"
            }, {
              title: "Units",
              field: "UnitsInStock"
            dataBound: function() {
              kendo.drawing.drawDOM("#grid", {
                  paperSize: "A4",
                  margin: "3cm",
                  template: $("#page-template").html()
                  kendo.drawing.pdf.saveAs(group, "filename.pdf");

        // Import DejaVu Sans font for embedding

        // NOTE: Only required if the Kendo UI stylesheets are loaded
        // from a different origin, e.g.
            "DejaVu Sans"             : "https://kendo.cdn.telerik.com2020.2.513/styles/fonts/DejaVu/DejaVuSans.ttf",
            "DejaVu Sans|Bold"        : "https://kendo.cdn.telerik.com2020.2.513/styles/fonts/DejaVu/DejaVuSans-Bold.ttf",
            "DejaVu Sans|Bold|Italic" : "https://kendo.cdn.telerik.com2020.2.513/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf",
            "DejaVu Sans|Italic"      : "https://kendo.cdn.telerik.com2020.2.513/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"

See Also

In this article
Not finding the help you need? Improve this article