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

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

    Posted 06 Jun 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
    118 posts

    Posted 08 Jun 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. Kendo UI is VS 2017 Ready
  4. Daniel
    Daniel avatar
    6 posts
    Member since:
    May 2016

    Posted 09 Jun 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();
                        });
                });

  5. Alex Hajigeorgieva
    Admin
    Alex Hajigeorgieva avatar
    118 posts

    Posted 13 Jun 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.
Back to Top
Kendo UI is VS 2017 Ready