CODEWITHSUNDEEP
kendo-uikendo-gridexport-to-pdf
Sandman
Sandman

Reputation: 2307

Export to PDF increase number of items per page

I have a grid control which I wish to export the content of. Upon initialisation, the pageSize attribute is set to 10 items however I want to increase the number of items per page during exportToPDF.

I have tried to modify the pageSize of the dataSource prior to carrying out the export but this seems to have no effect on the end product.

var grid = $("#grid").data("kendoGrid");                                    
var filter = grid.dataSource.filter;
grid.dataSource.query({
    filter: filter,
    pageSize: 20, // has no effect on the exported PDF
    page: 1,
    group: [{
        field: "groupField1",
        dir: "asc"
    }, {
        field: "groupField2",
        dir: "asc"
    }, {
        field: "groupField3",
        dir: "asc"
    }]
});

var progress = $.Deferred();
grid._drawPDF(progress)
    .then(function (root) {
        return kendo.drawing.exportPDF(root, { forcePageBreak: ".page-break", multiPage: true });
    })
    .done(function (dataURI) {
        // ... do some manual manipulation of dataURI
        kendo.saveAs({
            dataURI: manipualtedDataURI
        });
progress.resolve();

Is there something I am missing so I can display more items on each page of the PDF export?

EDIT

Including my grid definition with the pdfExport function suggested by the below answer (which never gets called):

var grid = $("#reportGrid").kendoGrid({                        
    pdf: {
        allPages: true,
        avoidLinks: true,
        repeatHeaders: true,            
        template: kendo.template($("#page-template").html()),
        scale: 0.7,
        margin: { top: "2.5cm", right: "1cm", bottom: "1.5cm", left: "1cm" },
        paperSize: "A4",
        landscape: true
    },
    // *this function is not getting called*
    pdfExport: function(e) {
        e.sender.dataSource.pageSize(10);
        e.promise.done(function() {
            e.sender.dataSource.pageSize(20);
        });
    },
    toolbar: kendo.template($("#template").html()),
    ...
});

Note: A template is used to include a header / footer on each page of the PDF export.

Another note: 'Manual manipulation of dataURI' includes going out to the server to perform a merge with another PDF file, so I cannot use the default export via the grid :(

EDIT 2

I have extended the Dojo example from @R.K.Saini's answer to use the method by which I need to generate the PDF export (as per original post). The snippet logs the URI of the grid being exported and when the pdfExport function is called. As you will see, when using the built in grid 'Export to PDF' button, the pdfExport function is triggered but when using the additional button below the grid, it is not.

Upvotes: 1

Views: 2378

Answers (1)

R.K.Saini
R.K.Saini

Reputation: 2708

You can use pdfExport event to change page size of your grid datasource before pdf export started and then when the export finish you just need to revert back the previous page size.

The call back function of this event receive grid instance as e.sender and and a promise as e.promise which can be used to set back the page size when exporting finish.

For more info check http://docs.telerik.com/kendo-ui/api/javascript/ui/grid#events-pdfExport

    $("#grid").kendoGrid({
    dataSource: dataSource,
    pdf: {
        allPages: true
    },
    pdfExport: function(e) {
      e.sender.dataSource.pageSize(10);
      e.promise.done(function() {
          e.sender.dataSource.pageSize(20);
      });
    },
    ...
   //Other configguration
 });

Here is a working demo http://dojo.telerik.com/UzOXO

Edit

You can also change grid page size in your custom export function just change grid page size before calling _drawPdf() function and change it back when done.

$("#btnPdfExport").kendoButton({
  click: function () {
      var grid = $("#grid").data("kendoGrid");                                    

      var progress = $.Deferred();
      // Change grid datasource pagesize before calling _drawPDF
      grid.dataSource.pageSize(20);
      grid._drawPDF(progress)
          .then(function (root) {
              return kendo.drawing.exportPDF(root, { forcePageBreak: ".page-break", multiPage: true });
          })
          .done(function (dataURI) {
              console.log("Exporting "  + dataURI);
              kendo.saveAs({
                  dataURI: dataURI,
                  fileName: "export.pdf"
              });
              progress.resolve();
              // Change grid datasource pagesize when done
              grid.dataSource.pageSize(10);
          });            
  }
});

Check Update DOJO here http://dojo.telerik.com/UzOXO/8

Upvotes: 2

Related Questions