Drawing Dom Chart for PDF Export with custom parameters

[James]

I am using

kendo.drawing.drawDOM

to draw a chart from DOM into a template for exporting as a PDF.  However the business want to add the custom parameters  into the footer.  This works but loses the default page numbering.  I understand adding custom parameters overwrites the default params so I would like to know if there is a work around or correct way to do this.. One which will still allow us to correctly number the pages. 

 $scope.exportOther = function (objId, filename){
            $scope.printDt = $.RGMPDate.onParseJSONUIDate(new Date());

            const hiddenElement = document.getElementById('griddiv');


            hiddenElement.style.visibility = 'visible';


            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,
                template: kendo.template($("#page-template").html())
                    (
                        {
                            pageNum: "",
                            totalPages: "",
                            fBasisSelectedLockedTxt : $scope.fBasisSelectedLockedTxt,
                            rgod: $scope.printDt,
                            fTimespanSelectedTxt: $scope.fTimespanSelectedTxt
                        })
                

            }).then(function (group) {

                kendo.drawing.pdf.saveAs(group, filename);
                hiddenElement.style.visibility = 'hidden';
            });

    
        };

[Nikolay]

Hi James,

To include custom parameters in the footer while retaining the default page numbering in your PDF export, you can modify the template to dynamically insert the page numbers. Here's how you can achieve this:

1. Update the Template: Modify your template to include placeholders for page numbers.
2. Use pageNum and totalPages: Ensure these placeholders are dynamically updated during the PDF generation.
Here's an example of how you can adjust your code:

$scope.exportOther = function (objId, filename) {
    $scope.printDt = $.RGMPDate.onParseJSONUIDate(new Date());

    const hiddenElement = document.getElementById('griddiv');
    hiddenElement.style.visibility = 'visible';

    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,
        template: kendo.template($("#page-template").html())
            ({
                pageNum: "#= pageNum #",
                totalPages: "#= totalPages #",
                fBasisSelectedLockedTxt: $scope.fBasisSelectedLockedTxt,
                rgod: $scope.printDt,
                fTimespanSelectedTxt: $scope.fTimespanSelectedTxt
            })
    }).then(function (group) {
        kendo.drawing.pdf.saveAs(group, filename);
        hiddenElement.style.visibility = 'hidden';
    });
};

In this example, pageNum and totalPages are placeholders that Kendo will replace with the actual page numbers during the PDF generation process. This way, you can include your custom parameters while still retaining the default page numbering.

Regards,

Nikolay

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