Export from Grid to Pdf and ather html content

[Constantin]

There is a Grid with dynamic columns.The number of columns is not fixed(10-20col). there is horizontal and vertical scrolling

Html structure:

<div id="root">
 <div id="grid-param"> ...html contet...</div>
 <div id="grid"> </div>
</div>

Export:

var grid = $("#grid").data("kendoGrid");
var progress = $.Deferred();
kendo.drawing.drawDOM($("#grid-param"))
 .then(function (header) {
       grid._drawPDF(progress)
 .then(function (foolGrid) {
      foolGrid.children.push(header);
      return kendo.drawing.exportPDF(foolGrid, { margin: { left: '2cm', top: '8cm', right: '2cm', bottom: '2cm' },  allPages: true });})
.done(function (dataURI) {
 kendo.saveAs({
  dataURI: dataURI,
  fileName: name });
  progress.resolve();});
});

 

As a result, a document is formed in which content is superimposed on each other (pic in attach). The top of the Grid displays content from div #grid-param.

how to group content correctly so that there is no overlap?)

kedto ver. 2018.1.221.545

 

[Georgi Denchev]

Hi Constantin,

Thank you for the provided snippets and screenshot.

You can use an export template and append the required html above the grid. By default the template is used on every page. If you need to show the custom html only on the first page, you can perform a conditional check. You can also style the template in whatever way you want using css.

I have prepared a slightly modified dojo example of the example presented in the Templates article.

Let me know if you face any difficulties.

Best Regards,
Georgi Denchev
Progress Telerik

[Constantin]

Georgi Denchev thanks for the quick reply!

export template - works if you set the paper size(( in my implementation the Grid has a dynamic number of columns....

any more ideas?)

[Georgi Denchev]

Hello Constantin,

You can set the paperSize using a width and a height. For the height you can either use the height of the grid or use a hardcoded one.

For the width you can use the number of columns to calculate how wide the page should be.

let width = grid.columns.length * 150;

The above example will create a pdf wide enough to fit all columns and set 150px of width for each columns. You can also loop through each column and get the offset Width. Then add each width to the total amount and use that number when exporting.

var totalWidth = 0;

for (let index = 0; index < grid.columns.length; index++) {
    const column = grid.columns[index];
    // Get the offsetWidth.
    totalWidth += grid.table[0].rows[0].cells[index].offsetWidth;
}

You can add a few pixels to each offset width to widen all of the exported columns if they are too close together.

Finally set the paperSize.

paperSize: [width, height]

Here is the updated dojo with both methods present. I've added 20 columns in total, you can delete some to see the result with less.

Let me know if this works for your scenario.

Best Regards,
Georgi Denchev
Progress Telerik

[Constantin]

Georgi thanks for the help!

The template has been added successfully. I haven't figured out how to style it yet. Center alignment enabled)

Now I get the result as in this example.(pdf breaks)  myDojoExample

[Georgi Denchev]

Hi Constantin,

The issue comes from the locked columns. An explanation about this behavior has been given in an issue in our public GitHub Repo.

Basically the locked columns exist in a different <table> element compared to the unlocked ones and as per the Known Limitations article, this could cause issues with the alignment during export.

In this case we could go back to the initial code that you provided and modify a few things.

<div id="htmlContent"></div>
<div id="grid"></div>

<script>
$("#pdf").click(function () {
    var grid = $("#grid").data("kendoGrid");

    var progress = $.Deferred();

    kendo.drawing.drawDOM($("#htmlContent"))
        .done(function (htmlContent) {
            grid._drawPDF(progress)
                .then(function (root) {
                    root.children.unshift(htmlContent);
                    return kendo.drawing.exportPDF(root, { margin: { left: '2cm', top: '8cm', right: '2cm', bottom: '2cm' }, allPages: true, multiPage: true });
                })
                .done(function (dataURI) {
                    kendo.saveAs({
                        dataURI: dataURI,
                        fileName: "test.pdf"
                    });
                    progress.resolve();
                })
        })
});
</script>

We should use Unshift instead of Push in order to append the html content above the grid and we should also use multiPage: true. However with this method we have 2 pages, one for the html content and one for the grid. If we want to use the template, we would need all columns unlocked.

I understand that this is probably not the solution you expected and I apologize.

Best Regards,
Georgi Denchev
Progress Telerik

[Constantin]

Hi Georgi!

Is it possible to disable locked columns using js, make export and enable the locked columns?)

[Georgi Denchev]

Hello Constantin,

Locking and Unlocking the columns is possible, however there always must be at least 1 locked column, which would again break the export. This limitation can be found in the Important(Yellow) section of the Locked Columns article.

It is possible to use the getOptions and setOptions methods of the grid. However it is important to note that the setOptions method destroys and recreates the grid, which could lead to performance issues.

$("#pdf").click(function () {
    var grid = $("#grid").data("kendoGrid");
    let width = grid.columns.length * 150; // Use predefined width for all columns.
    let height = grid.table[0].rows.length * 33.6;
    var options = grid.getOptions();

    options.columns[0].locked = false;
    options.columns[1].locked = false;
    grid.setOptions(options)

    setTimeout(function () {
        kendo.drawing.drawDOM("#grid", {
            paperSize: [width, height],
            margin: "3cm",
            template: $("#page-template").html()
        }).then(function (group) {
            kendo.drawing.pdf.saveAs(group, "filename.pdf");
            options.columns[0].locked = true;
            options.columns[1].locked = true;
            grid.setOptions(options)
        });
    }, 3000)
});

In the above method we get the options, we change the locked properties of the first 2 columns, then we use setOptions to recreate the grid with the unlocked columns. I've used setTimeout to ensure that the new grid is initialized before we export the file. After the export is finished, we use the same approach to recreate the grid with columns one and two locked once again.

Here is the runnable dojo sample.

Best Regards,
Georgi Denchev
Progress Telerik

[Constantin]

Georgi, thanks for answers!

The last question in this topiс) is why not all row into PDF MyDojo ?

[Georgi Denchev]

Hello Constantin,

Thank you for the updated dojo.

The issue comes from the height of the exported file. Setting the height of the pdf to the height of the grid should fix this problem.

        var grid = $("#grid").data("kendoGrid");
        let width = grid.columns.length * 150; // Use predefined width for all columns.
        let height = grid.wrapper.height();

Let me know in case the issue persists.

Best Regards,
Georgi Denchev
Progress Telerik

[Constantin]

Hello Georgi,

a PDF document is formed with a page height equal to the Grid height. The result is many small pages instead of one large (

Here is the Dojo

 

[Constantin]

The problem has been resolved. Had to turn off locked columns...

Before executing kendo.drawing.drawDOM, I change the width and height of the grid:

let height = grid.table[0].rows.length * 33.6 + 94; //33.6 - height row

var totalWidth = 0;
for (let index = 0; index < grid.table[0].rows[0].cells.length; index++) {
  totalWidth += grid.table[0].rows[0].cells[index].offsetWidth+10;
}

I pass the entire div #root block to the drawDOM method:

kendo.drawing.drawDOM("#root")
.then(function(group) {
return kendo.drawing.exportPDF(group,
{
 paperSize: "auto",
 margin: { left: "1cm", top: "1cm", right: "1cm", bottom: "1cm" }
});
})
.done(function(data) {
kendo.saveAs({
allPages: true,
dataURI: data,
fileName: name
});
$('#root').css("maxWidth", currentWidth + "px"); //set degault values
gridElement.children(".k-grid-content").css("cssText", `height: ${newHeight - otherElements}px !important;`); //set degault values
});

[Georgi Denchev]

Hi Constantin,

I am glad you managed to resolve the issue and thank you for sharing your solution with the rest of the community. I am certain someone would find it helpful at some point.

Best Regards,
Georgi Denchev
Progress Telerik