Multi-page PDF Printing for Kendo UI Grids

The examples on Telerik’s site are a little sparse for PDF printing. Sure, it’s easy to print a Kendo grid to PDF, but let’s say you want to include other sections of the web page, or add a header, without creating an entirely separate “printable view”.

It took a lot of experimenting to arrive at the simple solution below. What all does it do?

  • Prints any section of the HTML document, including grids
  • Automatically determines page breaks for large grids
  • Scales the PDF contents to look good on a standard piece of paper
  • Displays a header and footer on each page with page numbers

    All that power is packed into this JavaScript function:

        function page_grid_render_pdf() {
            kendo.drawing.drawDOM($("#printable_area"),
                {
                    paperSize: [1100, 1430], // Scaling in pt - 8.5"x11" page ratio
                    landscape: true,
                    margin: { left: "0mm", top: "15mm", right: "0mm", bottom: "10mm" },
                    template: $("#pdf-page-template").html()
                }).then(function (documentgroup) {
    
                    // Generate PDF file
                    kendo.drawing.pdf.saveAs(documentgroup, "KendoPDF.pdf");
                });
        }
    

    You’ll also need to use the following section as the header and footer template.

    <script type="x/kendo-template" id="pdf-page-template">
        <div class="pdf-page-template">
            <div class="pdf-page-header">
                <span style="font-size: 140%;">
                    PDF Printing with Kendo UI
                </span>
                <div style="float: right">Page #:pageNum# of #:totalPages#</div>
            </div>
            <div class="pdf-page-footer">
                <div style="float: right">Page #:pageNum# of #:totalPages#</div>
            </div>
        </div>
    </script>
    

    When you call the JavaScript printing function, it will render everything in <div id="printable_area"> My printable area contains user information and a grid with user data.

    The paper size is set very large to take advantage of your browser or PDF viewer’s built-in fit to page functionality when printing. When I set paper size to the standard “Letter” size, my Kendo grid was enormous, and only a few rows fit on each page. Using a large paper size prints it out as it appears on your screen.

    I set the side margins to zero, while leaving space for the header and footer, since again your browser or PDF viewer will add its own margins.

    You may notice I am not using any of the page-break options mentioned in the Kendo PDF documentation. I tried them all and this automatic version seems to work the best with large grids, and it doesn’t require any manual page breaks added to grid rows.

    Another tip is to include the Pako compression library that comes with Kendo UI: pako_deflate.min.js Kendo will automatically use it when included, and it reduced my PDF file size ten times over!

  • 4 thoughts on “Multi-page PDF Printing for Kendo UI Grids

    • May 4, 2016 at 2:01 am
      Permalink

      Just had a question about the point scaling you used. How did you come up with 1100×1430? I am having issues with the auto page breaking on a very large table, sometimes the page break is cutting off some rows. The 1100×1430 seems to work however some pages may have very large white spaces. I was hoping to scale up a bit more to decrease page count and I cant figure out how you came up with 1100×1430.

      Reply
      • May 5, 2016 at 1:33 am
        Permalink

        Hey Justin, I kept increasing the dimensions until the printout resembled a size similar to my display. Then I multiplied the longer side by 0.77 to keep the aspect ratio the same as a sheet of 8.5″ x 11″ letter paper. 8.5 / 11 = 0.77, and 1430 * 0.77 = 1105

        I’ve seen grid rows get partly cut off by the page break sometimes. I’m still looking for a solution to that.

        Reply
        • May 5, 2016 at 1:52 am
          Permalink

          Great. Thanks for the info. Right now I have a very large table I am converting to PDF and I was having issues where it wasn’t just a row being cut off but a few rows missing even. I am going to try next using the actual kendo grid with PDF export functionality to see if that is a bit more reliable. The rows I have are of variable height which also adds to the problem. I did see on the telerik site (http://docs.telerik.com/kendo-ui/controls/data-management/grid/how-to/pdf-export/multi-page-variable-height) the new 2016 Q2 release supposedly will handle this case “correctly”. We shall see I guess.

          Reply
          • May 6, 2016 at 1:35 am
            Permalink

            Hey Dan,
            Just wanted to let you know I have been testing out the latest release 2016.2.504 from telerik and I have had some luck using the PDF export from the grid directly. See here http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export

            This adds a pdf export button to the grid and you can configure the paper size, you have to play around with the sizes to get all the columns to fit on the page but the auto page break seems to work correctly. (knock on wood).

            Reply

    Leave a Reply

    Your email address will not be published. Required fields are marked *