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

7 posts, 0 answers
  1. devster
    devster avatar
    19 posts
    Member since:
    Oct 2009

    Posted 24 Feb Link to this post

    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.

  2. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 25 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  3. Kendo UI is VS 2017 Ready
  4. devster
    devster avatar
    19 posts
    Member since:
    Oct 2009

    Posted 25 Feb in reply to Mihai Link to this post

    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.

     

  5. Mihai
    Admin
    Mihai avatar
    153 posts

    Posted 26 Feb Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
  6. devster
    devster avatar
    19 posts
    Member since:
    Oct 2009

    Posted 29 Feb in reply to Mihai Link to this post

    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? 

  7. devster
    devster avatar
    19 posts
    Member since:
    Oct 2009

    Posted 29 Feb in reply to devster Link to this post

    Example http://dojo.telerik.com/OsOpu/9 for approach 2
  8. T. Tsonev
    Admin
    T. Tsonev avatar
    2772 posts

    Posted 03 Mar Link to this post

    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
     
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
     
Back to Top
Kendo UI is VS 2017 Ready