How to adapt chart width in PDF export of chart and grid

[devster]

Scenario: you wish to export a page with a grid and a chart to PDF.

I created a sample dojo based on existing Telerik samples: http://dojo.telerik.com/OsOpu/3

Goals:

1. Use full browser width when viewing the grid & chart in the browser. (works)

2. Adapt to A4 page width in the PDF (works for grid, not for chart which is truncated).

 

I am aware of the export specific css options, however this does not solve the problem for the chart.

A workaround is to fix the chart width to solve the PDF issue, but then the full browser width is not used.

Temporarily changing the width of the chart is a workaround, but then the user sees the change in width.

Any suggestions are welcome.

[Mihai]

Hello,

One possibility is to apply a CSS transformation to scale down the grid in PDF.  Here is the demo: http://dojo.telerik.com/OsOpu/4 -- note the style at the bottom:

        kendo-pdf-document #chart {
          transform: scale(0.5, 0.5);
        }

(When paperSize is passed, the recommended selector is kendo-pdf-document rather than .k-pdf-export.)

In the next Kendo UI version, drawDOM will also support a scale option, which applies a scaling factor to the whole content.

Regards,
Mihai
Telerik

 

 

[devster]

Mihai,

Thanks for your help.

This is a step in the right directions, but leaves two problems:

- In the PDF, the chart is truncated on the right.

- The goal is to use the full width of the A4 page minus margins on both sides, regardless of the original browser width.

 

[Mihai]

Hi Pierrick,

I'm sorry, I didn't realize that the chart is truncated in my demo.  I'm afraid there is no simple solution for the current release.  The "scale" option from the next version will hopefully help a lot in such cases.

The method that would possibly work currently is to resize the chart before exporting.  To avoid the flicker you can clone the DOM tree (use jQuery's $(container).clone(true, true)) and place it into a DIV with absolute position left: -10000px, top: -10000px so that it doesn't show in the browser view.

Regards,
Mihai
Telerik

 

 

[devster]

Hi Mihai,

I tried to apply the cloning approach:

1. Clone to visible div named pdfPageCopy: http://dojo.telerik.com/OsOpu/8

Issue: exports the table (good), but not the chart (bad) 

2. Clone to div in negative position (-100, -100 px top and left)

Issue: exports only part of clone that is visible in the browser.
When using -10000px, nothing is exported.

Given these issues, do you see a solution for the original problem? 

[devster]

Example http://dojo.telerik.com/OsOpu/9 for approach 2

[T. Tsonev]

Hi,

My recommendation would be to export the content as a single block and scale it to fit before producing the PDF.

This is illustrated in the Apply Transformations During Export help article. I've customized it to your scenario in this snippet.

The drawback is that you can't have multiple pages created automatically. The scale factor also might be subject to calculations at run-time.

I hope this helps.

Regards,
T. Tsonev
Telerik