Kendo JQuery Grid append image to PDF export

Question

I would like to append an image at the end of a PDF export. The image should be placed after the exported grid on a new page.

Below is my code which initialises the kendo grid as well as the PDF export.

    var riskScoresGrid = $("#riskDataTable").kendoGrid({
    dataSource: {
        transport: {
            read: {
                url: "/api/Organisation/GetResidualScoresPDF",
                type: "get",
                data: model,
            }
        },
        pageSize: 20,
        schema: {
            data: function (response) {
                return response;
            },
            total: function (response) {
                return response.length;
            }
        }
    },
    columns: [
        {
            field: "SubDivision",
            title: "COB / PRU",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Category",
            title: "Category",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "SubCategory",
            title: "Sub Category",
            template: "#= SubCategory || '-' #",
            width: "120px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Impact",
            title: "Impact",
            width: "100px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Likelihood",
            title: "Likelihood",
            width: "100px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Score",
            title: "Score",
            width: "60px",
            attributes: { style: "text-align: center;" },
            headerAttributes: { style: "text-align: center;" }
        },
        {
            field: "Comments",
            title: "Comments",
            headerAttributes: { style: "text-align: center;" },
            template: function (dataItem) {
                return decodeHtmlEntities(dataItem.Comments);
            }
        }
    ],
    pageable: true,
    toolbar: ["pdf"],
    pdf: {
        fileName: "exported-grid.pdf",
        allPages: true,
        avoidLinks: true,
        paperSize: "A3",
        margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
        landscape: true,
        title: "Risk Assessment: " + entity,
        template: $("#page-template").html()
    }
});

Additionally, below is the html code for the page template:

<script type="x/kendo-template" id="page-template">
      <div class="page-template">
        <div class="header">
    <em>#=getKendoHeader()#</em>
        </div>
    </div>
</script>

I've tried adding an img tag to the page-template div but this adds the image on every page and it sits in front of the grid so the grid is not visible.

Answer 1

You can try using the template syntax and render an image only on the last page

    <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>
        <div class="footer">
            This is a footer.
            Page #:pageNum# of #:totalPages#
        </div>
        # if(pageNum == totalPages){#
        <img src="https://picsum.photos/id/237/500/300" />
        #}#
    </div>
    </script>

Here is an image added only at the end of the report - example.