Unable to export div with overflow property to pdf

[Wei Shiong]

Hi,

   I'm trying to follow this example, http://dojo.telerik.com/awEvi/2 to export html content to pdf. The original example works but when I modified the div to something like this to contain overflow properties,

<div class="demo-section k-content export-app wide hidden-on-narrow">
        <div id="Test" style="width:100vw;height:20vw;overflow-y:auto;overflow-x:auto">
          <div class="demo-section content-wrapper wide">
            <div class="demo-section charts-wrapper wide">
              <div id="users"></div>
              <div id="applications"></div>
              <div id="referrals"></div>
            </div>
            <div id="grid"></div>
            <div id="myDiv" style="height:100vw;width:5vw;background:red"></div>
          </div>
        </div>
 </div>

 

and setting the selector to Test :

$(".export-pdf").click(function() {
        // Convert the DOM element to a drawing using kendo.drawing.drawDOM
        kendo.drawing.drawDOM($("#Test"))
        .then(function(group) {
            // Render the result as a PDF file
            return kendo.drawing.exportPDF(group, {
                paperSize: "auto",
                margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
            });
        })
        .done(function(data) {
            // Save the PDF file
            kendo.saveAs({
                dataURI: data,
                fileName: "HR-Dashboard.pdf",
                proxyURL: "//demos.telerik.com/kendo-ui/service/export"
            });
        });
    });

 

the content becomes clipped as shown in the attached image.

Is there any way in which I could export the content within the div without having it clipped?

Best Regards,

CH

[Stefan]

Hello,

This behaviour is expected, as the Kendo UI PDF Export will export only the rendered part of the container:

http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#getting-started

In order to not cut some of the contend, please make sure that the content is currently rendered on the page.

Let me know if you need additional assistance on this matter.

Regards,
Stefan
Telerik by Progress