This is a migrated thread and some comments may be shown as answers.

PDF Export: Template with custom parameters has a problem with pageNum/totalPages

5 Answers 640 Views

Grid

This is a migrated thread and some comments may be shown as answers.

Franz asked on 22 Nov 2016, 10:09 AM

Hi,

I'm exporting my KendoGrid to PDF with a Template. I need to pass variables to the template like this:

template: kendo.template($("#kendo-grid-pdf-template").html())({ CUSTOMERNAME: cust.FullName, CUSTOMERID: cust.Id})

This is the template:

<script id="kendo-grid-pdf-template" type="text/x-kendo-template">

<div class="page-template-pdf">

<div class="header-pdf">

#: CUSTOMERNAME #, Customer ID: #: CUSTOMERID#

</div>

</script>

The Problem:

PDF generation fails because "pageNum" and "totalPages" are undefined. This only happens when I pass my custom parameters. How do I pass the pageNum and totalPages parameters that are required? It work when I pass it like this:

template: kendo.template($("#kendo-grid-pdf-template").html())({ CUSTOMERNAME: cust.FullName, CUSTOMERID: cust.Id, pageNum: "?", totalPages: "?"})

but where do I get the right values?

5 Answers, 1 is accepted

answered on 02 Dec 2016, 01:18 PM

Hello Stefan,

Today I noticed that my drawDOM function only generates 1 page in the PDF. I Need every page of the grid in my PDF Export.

I set "allPages: true", but to no avail. Can you please tell me what is wrong with my Approach?

window.exportPdf = function () {

kendo.drawing.drawDOM("#leistungsanzeigeGrid",

{

multiPage: true,

allPages: true,

landscape: true,

repeatHeaders: true,

paperSize: ["500mm", "700mm"],

margin: { top: "2.5cm", right: "0cm", bottom: "1cm", left: "0cm" },

template: kendo.template($("#kendo-grid-pdf-template").html())(

{

pageNum: "",

totalPages: "",

KDNR: person.Kundennummer,

NAME: person.DisplayFullName,

GEB: formatJsonDate(person.Geburtsdatum),

SEX: identifySex(person.Geschlecht),

SSN: person.DisplaySvnr

})

}).then(function (group) {

kendo.drawing.pdf.saveAs(group, "test.pdf");

});

}

answered on 06 Dec 2016, 08:20 AM

Hello Franz,

From the provided code I noticed that kendo.drawing.drawDOM used instead of the pdf property of the Grid. Please have in mind that kendo.drawing.drawDOM will export the DOM elements currently visible on the page.

The Grid has a built-in support for pdf export, please check the following demo demonstrating how to use the Grid pdf export:

http://demos.telerik.com/kendo-ui/grid/pdf-export

Also, please check all of the available options for PDF export available through the Grid' API:

http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pdf

Regards,
Stefan
Telerik by Progress

Kendo UI is ready for Visual Studio 2017 RC! Learn more.

James

commented on 14 Apr 2025, 08:45 PM

What was the solution for this please? I have the same issue. I am Drawing a Chart from the DOM to PDF in the same way as above but need to inject some custom parameters for the Header/Footer without losing the page numbering.

Nikolay

commented on 16 Apr 2025, 09:11 AM

Hi James,

The issue you're encountering is due to the custom parameters overriding the default context of the Kendo template, which includes pageNum and totalPages. To resolve this, you need to ensure that these parameters are correctly passed along with your custom parameters.

Here's how you can achieve this:

1. Use the pdfExport Event: Capture the pdfExport event to dynamically add the pageNum and totalPages parameters to your template.

2. Modify the Template: Ensure your template can handle the additional parameters.

Here's an example of how you can modify your code:

$("#grid").kendoGrid({
    toolbar: ["pdf"],
    pdf: {
        allPages: true,
        avoidLinks: true,
        landscape: false,
        paperSize: "A4",
        fileName: $("#uxHeader").text(),
        margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },
        repeatHeaders: true,
        scale: 0.6,
        template: kendo.template($("#kendo-grid-pdf-template").html())
    },
    pdfExport: function(e) {
        var grid = e.sender;
        var options = grid.options.pdf;
        var template = options.template;

        options.template = function(data) {
            data.CUSTOMERNAME = cust.FullName;
            data.CUSTOMERID = cust.Id;
            data.pageNum = data.pageNum;
            data.totalPages = data.totalPages;
            return template(data);
        };
    },
    // Other grid configurations...
});

And your template should look like this:

<script id="kendo-grid-pdf-template" type="text/x-kendo-template">
    <div class="page-template-pdf">
        <div class="header-pdf">
            #: CUSTOMERNAME #, Customer ID: #: CUSTOMERID#
        </div>
        <div class="footer-pdf">
            Page #: pageNum # of #: totalPages #
        </div>
    </div>
</script>

By using the pdfExport event, you can dynamically add the pageNum and totalPages parameters to your template, ensuring they are correctly passed and used during the PDF generation process.

Regards,

Nikolay

James

commented on 16 Apr 2025, 11:28 AM

Oh I don't think that will work for me. I am not exporting a Grid so there is no event to override. I am exporting a DOM which contains a Chart and also a Grid and a Paragraph.

Nikolay

commented on 18 Apr 2025, 07:21 AM

Hi James,

Thanks for the clarification. Since you're not exporting a Kendo Grid, but rather using kendo.drawing.drawDOM directly to export a custom DOM structure (with a chart, grid, and paragraph), the usual pdfExport event (which is available on Kendo Grid) isn't available. However, you can still dynamically inject both custom values and the pageNum/totalPages placeholders using a workaround.

Use a template function instead of calling kendo.template(...)(params) directly. The template function will receive the built-in context (pageNum, totalPages) from Kendo’s PDF exporter, and you can augment that object with your own custom parameters.

1. Update your drawDOM call like this:

kendo.drawing.drawDOM($(".chart-content-wrapper"), {
    paperSize: "A4",
    landscape: true,
    margin: {
        left: "2cm",
        top: "2cm",
        right: "2cm",
        bottom: "2cm"
    },
    forcePageBreak: ".page-break",
    scale: 0.5,
    title: filename,

    // ✅ This is the key: use a FUNCTION instead of rendering the template immediately
    template: function (data) {
        data.CUSTOMERNAME = $scope.cust.FullName;
        data.CUSTOMERID = $scope.cust.Id;
        data.rgod = $scope.printDt;
        data.fBasisSelectedLockedTxt = $scope.fBasisSelectedLockedTxt;
        data.fTimespanSelectedTxt = $scope.fTimespanSelectedTxt;

        return kendo.template($("#page-template").html())(data);
    }
}).then(function (group) {
    kendo.drawing.pdf.saveAs(group, filename);
    hiddenElement.style.visibility = 'hidden';
});

2. Your #page-template should look like:

<script id="page-template" type="text/x-kendo-template">
    <div class="page-template-pdf">
        <div class="header-pdf">
            <strong>#: CUSTOMERNAME #</strong><br>
            Customer ID: #: CUSTOMERID #<br>
            Date: #: rgod #<br>
            Basis: #: fBasisSelectedLockedTxt #<br>
            Timespan: #: fTimespanSelectedTxt #
        </div>
        <div class="footer-pdf">
            Page #: pageNum # of #: totalPages #
        </div>
    </div>
</script>

Regards,

Nikolay