Export some DOM + Grid to PDF - grid isn't fully drawn

6 posts, 0 answers
  1. Daniel
    Daniel avatar
    13 posts
    Member since:
    May 2016

    Posted 06 Jun 2016 Link to this post

    I have some summary header for my Grid but in sepparated DOM. HTML looks like this:

    <div id="report">

    <div class="report-header"></div>

    <div class="report-table"></div>

    </div>

    kendo.drawing.drawDOM("#report",

    { allPages: true,

    avoidLinks: true,

    paperSize: "A4",

    margin: { top: "1cm", left: "1cm", right: "1cm", bottom: "1cm" },

    landscape: true,

    repeatHeaders: true,

    template: $("#page-template").html(),

    scale: 0.5,

    title: 'Raport dzienny'

    }).then(function(group){

    kendo.drawing.pdf.saveAs(group, 'file.pdf');

    });

    Grid should have around 30 rows, it isn't fully drawn. It's look like DrawingAPI draw only visible part of Grid. How to fix it? 

     

  2. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    320 posts

    Posted 08 Jun 2016 Link to this post

    Hello Daniel,

    To enable multiple pages of the Kendo UI Grid PDF Export, I suggest to use the native Kendo UI Grid pdf export functionality. When pdf.allPages is set to true in the Grid PDF export settings, the widget dataSource will make requests for all the pages. In contrast - the Kendo UI Drawing API can only draw what is present on the page.

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#export-of-all-pages 

    Note that the Kendo Drawing PDF Options API which are slightly different that the Kendo UI Grid's native PDF Export.:

    Kendo Drawing API:

    http://docs.telerik.com/kendo-ui/api/javascript/drawing/pdfoptions

    Kendo UI Grid PDF Export API:

    http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#configuration-pdf

    In case there is a requirement to export other DOM elements along with the Kendo UI Grid, a sample configuration can be found in this forum post:

    http://www.telerik.com/forums/export-pdf-in-multiple-pages#jKp6jQLT9U20BUVDxEpHYA

    Please let me know if you need more help in configuring the Kendo UI Grid PDF Export.

    Kind Regards,
    Alex
    Telerik
    Join us on our journey to create the world's most complete HTML 5 UI Framework - download Kendo UI now!
  3. Daniel
    Daniel avatar
    13 posts
    Member since:
    May 2016

    Posted 09 Jun 2016 Link to this post

    I tried solution from this posts: http://www.telerik.com/forums/export-pdf-in-multiple-pages#jKp6jQLT9U20BUVDxEpHYA but still there is some problems. Now header is in seperated page and also Grid isn't fully drawen. I include zip with screenshot from my app and pdf. 

     

    var progress = $.Deferred();
            kendo.drawing.drawDOM($("#report-"+self.activeReport+" .report-header"))
                .done(function(header) {
                    table.grid._drawPDF(progress)
                        .then(function(root) {
                            root.children.unshift(header);
     
                            return kendo.drawing.exportPDF(root, {
                                paperSize: "a4",
                                margin: {left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" },
                               // allPages: true,
                                landscape: true,
                                repeatHeaders: true,
                                template: $("#page-template").html(),
                                scale: 0.5,
                                title: 'Raport dzienny'
                            });
                        })
                        .done(function(dataURI) {
                            console.log("Okay");
                            kendo.saveAs({
                                dataURI: dataURI,
                                fileName: "test.pdf"
                            });
                            progress.resolve();
                        });
                });

  4. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    320 posts

    Posted 13 Jun 2016 Link to this post

    Hi Daniel,

    The Kendo UI Grid PDF Export pageTemplate was introduced in Q2 2016. I think that the page template may be better suited for your requirements and also easier and cleaner to implement. The page template provides a highly customizable page layout and can include additional DOM elements.

    http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#page-template

    For your convenience, I modified one of our demos to match the settings in the ticket:

    http://dojo.telerik.com/uSato

    Kind Regards,
    Alex
    Telerik
     
    Get started with Kendo UI in days. Online training courses help you quickly implement components into your apps.
  5. Richard
    Richard avatar
    11 posts
    Member since:
    Mar 2017

    Posted 05 Oct Link to this post

    Alex, do you know if the pageTemplate is only valid for Grid exports? Can I use it with Line Charts + Grid export, with a header logo/text and footer?
  6. Stefan
    Admin
    Stefan avatar
    1389 posts

    Posted 09 Oct Link to this post

    Hello, Richard,

    I provided an answer to the similar question in the following forum thread:

    http://www.telerik.com/forums/exporting-multiple-charts-(and-grids)-to-pdf

    If additional assistance is needed, please continue the discussion only in one of the thread by your choice.

    Regards,
    Stefan
    Progress Telerik
    Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Back to Top