First I'd like to say that I was working with the PDF Export and Drawing API's to build a quote/invoice with repeating header section and complex cells for specific parts, prices, etc. and the automatic paging and repeatHeaders worked out wonderfully.
One thing I'm still trying to figure out is how to add something like the {{pageCount}} of {{pageTotal}} without having a grid involved. Is there anything in the API's that I can use to achieve this effect and if not is there a way I can perhaps interact with the repeat header to hook the Javascript to it that I'd need to make this happen?
7 Answers, 1 is accepted
You can use the PDF page template to add a header and/or footer template with the desired content to each page of the exported document (both page count and total are available in the templates as pageNum and totalPages):
https://www.telerik.com/kendo-angular-ui/components/pdfexport/multi-page-content/#toc-page-templates
https://stackblitz.com/edit/angular-gjcjum?file=app/app.component.ts
This feature is available to all documents generated with the Kendo UI for Angular PDFExport component, regardless of whether the content involves a Grid or not (content could be a regular HTML table or composed of any other elements).
I hope this helps.
Regards,
Dimiter Topalov
Progress Telerik

Thank you Dimiter, I'm not getting the described behavior with that code.
My best guess, similar to the dropdownlist as filter, I have @progress/kendo packages from February or March and I'll probably just need to update them and see if this is a versioning issue. If that doesn't take care of it I'll submit a ticket with the rebuild.
Sure, take your time and let me know how this goes.
I hope updating to the latest versions of our packages and using the approach, described in my previous response will yield the desired results, but if it does not, please send us a similar isolated runnable project where the issue can be observed, so we can inspect it further and try to provide a suggestion that is most suitable to the specific use case. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik

You can customize the position and apply both headers and footers to each page (if necessary) by setting the page margins and positioning the respective template content accordingly.
The previously linked PDF Export demo shows precisely the desired layout - showing the page numbers in the top of the page as specified by the custom CSS for positioning the template content:
<kendo-pdf-export #pdf paperSize=
"A4"
margin=
"2cm"
>
<ng-template kendoPDFTemplate let-pageNum=
"pageNum"
let-totalPages=
"totalPages"
>
<div class=
"pageNum"
>
Page {{ pageNum }} of {{ totalPages }}
</div>
</ng-template>
<my-invoice [data]=
"data"
></my-invoice>
</kendo-pdf-export>
`,
styles: [`
.pageNum {
font-family
:
"DejaVu Sans"
,
"Arial"
,
sans-serif
;
position
:
absolute
;
top
:
10px
;
left
:
10px
;
}
You can also customize the template and show one at the top and one at the bottom of each page, e.g.:
https://stackblitz.com/edit/angular-hjyfwb?file=app/app.component.ts
The position is determined by the custom styling provided for each element within the template.
Let me know whether inspecting the examples above and applying the necessary adjustments to your implementation yielded the desired result. If not, as previously discussed, please send us a similar isolated runnable project where the undesired positioning can be observed, so we can inspect it further and determine what might be causing it. Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik

Dimiter,
I think I see part of the problem. I had tried wrapping my whole report (inside of the kendo-pdf-export div) and it made the table and all of it's internal contents vanish from the report. I did notice that when I had ng-template pushed out against kendo-pdf-export that even though I couldn't see anything the print showed my header with page 1 of 1 in the correct place although an over-sized version of the table header was all that printed. Past that any attempts to move the ng-template kendoPDFTemplate div with the let-pageNum and let-totalPages inward into the table I'm using, or the thread, or the particular td that the header rests in, made any component it was wrapped around no longer visible.
One question I might have to ask as well - I'm structuring my report with a lot of sizing from ngStyles (via HostListener). Is that incompatible with the use of this API?
I am afraid I cannot fully picture the scenario, exact implementation and the resulting issue. In general, the header and footer templates rely on leaving space on top and/or bottom of the page, set via the PDFExport margin option, and placing the desired content (provided in the PDF template) in these available space on the page, positioning it via CSS.
The custom CSS, provided for the inner PDF content components (like Grids, my-invoice from our demos, etc) typically should not interfere with the functionality described above.
Can you please send us a similar isolated runnable demo (or modify the ones, linked so far) that replicates the discussed scenario more closely, and where the observed undesired layout can be observed, so we can inspect it further and spot any issues with the specific use case? Thank you in advance.
Regards,
Dimiter Topalov
Progress Telerik