Problems with exporting page with charts

[Daniel Plomp]

Hi,

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.

kendo.drawing.drawDOM($(".page-container"),
        {
            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
            kendo.saveAs({
                dataURI: data,
                fileName: "Proposal.pdf",
                forceProxy: true,
                proxyURL: '@Url.Action("Download")'
            });
        });

Questions

• 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,
Daniel

 

[T. Tsonev]

Hello,

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.resize(container);
kendo.drawing.drawDOM(container, ...)
.always(function() {
    $(container).removeClass("print");
});

Page breaks can be specified manually, with some restrictions.

I hope this helps.

Regards,
T. Tsonev
Telerik