Problems with exporting page with charts

2 posts, 0 answers
  1. Daniel Plomp
    Daniel Plomp avatar
    130 posts
    Member since:
    Feb 2004

    Posted 21 Sep 2015 Link to this post


    I've constructed a page which containers some paragraph blocks and charts. I have a button that will export the DOM to an A4 PDF. I have some influence on the paragraphs, but the charts are not being scaled to the A4 format.

    The page is based on Bootstrap, so I use rows and columns.

                paperSize: "A4",
                margin: { left: "20mm", top: "20mm", right: "20mm", bottom: "20mm" }
            .then(function (group) {
                // Render the result as a PDF file
                return kendo.drawing.exportPDF(group);
            .done(function (data) {
                // Save the PDF file
                    dataURI: data,
                    fileName: "Proposal.pdf",
                    forceProxy: true,
                    proxyURL: '@Url.Action("Download")'


    • Is Bootstrap not supported at all?
    • Can I have influence on the size of the charts like I can with e.g. <p> tags by adding the .k-pdf-export class?
    • Can I have influence on where I put page breaks?

    Thanks in advance,


  2. T. Tsonev
    T. Tsonev avatar
    2760 posts

    Posted 24 Sep 2015 Link to this post


    Please accept my apologies for the delayed response.

    The PDF export module will take input from the computed styles. The choice of CSS framework, if any, is irrelevant as long as it produces the required layout.
    The Chart, and a good proportion of the Kendo UI widgets, will not resize automatically when the container size is changed.
    They require an explicit layout update to respond to the new dimensions. For example (pseudo-code):
    var container = $(".page-container").addClass("print");
    kendo.drawing.drawDOM(container, ...)
    .always(function() {

    Page breaks can be specified manually, with some restrictions.

    I hope this helps.

    T. Tsonev
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
Back to Top