PDF export column headers

[John]

Is there anyway to fix the column headers on an export so that the header text does not get cutoff.  There is plenty of room left in the column based on the length of the data, but the headers are being cutoff.  I've tried several stylesheet changes, but nothing seems to work.  Any help is appreciated.

[Martin Bechev]

Hi John,

Thank you for the provided screenshot.

Based on the provided details, I am not sure what the exact configuration is that leads to the cutting off behavior. As far as I can see, the Grid component is used and exported to PDF. However, I am not sure if you used the built-in PDF export functionality of the Grid:

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export

or the standalone PDFExport component:

https://www.telerik.com/kendo-angular-ui/components/pdf-export

Depending on the configuration, the suggestions would be different. That is why we will need some more context about the current state of the implementaiton and which components are used.

Let me know more about your implementation so far.

Regards,
Martin Bechev
Progress Telerik

[John]

Here is the method that I call to generate the PDF.

<ng-template kendoGridToolbarTemplate class="navbar">
    <ul class="navbar-nav me-auto mb-2 mb-lg-0 flex-d-row">
        <li class="nav-item me-3">
            <button type="button" (click)="exportGrids()" class="btn btn-outline-primary">
                <fa-icon [icon]="faFilePdf" class="me-2"></fa-icon> Export to PDF
            </button>
        </li>
    </ul>
</ng-template>

public exportGrids(
    grids: QueryList<GridComponent>,
    pdfExportName: string,
    pdfPaperSize: string = 'Letter',
    pdfLandscape: boolean = true): void {

    // hide the edit buttons while exporting to PDF
    this.showEditButtons = false;
    const promises = grids.map((grid) => grid.drawPDF());
    Promise.all(promises)
        .then((groups) => {
            const rootGroup = new Group({
                pdf: {
                    multiPage: true,
                },
            });
            groups.forEach((group) => {
                rootGroup.append(...group.children);
            });

            return exportPDF(rootGroup, { paperSize: pdfPaperSize, landscape: pdfLandscape });
        })
        .then((dataUri) => {
            saveAs(dataUri, pdfExportName);
        }).finally(() => { this.showEditButtons = true; });
}

[Martin Bechev]

Hi John,

I see that you are using the Drawing library and its drawPDF method, probably to export multiple Grids to the same PDF, following this section:

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export#exporting-multiple-grids-to-the-same-pdf

Since this isn't the built-in PDF export functionality of the Grid, but rather an implementation that relies on the low-level Drawing API, some features are missing (like scale). 
What I would suggest is to try changing the paperSize to a bigger one, and ensure that there isn't any CSS that limits the Grid dimensions:

https://stackblitz.com/edit/angular-a4akkgi6?file=src%2Fapp%2Fapp.component.ts

Please keep in mind that if the column header is cut on the page, it's expected to be cut in the PDF as well. Try using custom CSS to show the complete header name.
Check the styles applied to the column headers and ensure that they don't affect the generated PDF. If exporting the Grid into a single PDF is a must, the solution needs to be adjusted a bit, but in case you can generate several PDFs, I would recommend using the <kendo-grid-pdf> component as its provides more options to export bigger Grids.

Regards.