This is a migrated thread and some comments may be shown as answers.

PDF Export/Drawing - Page Count without Grid?

7 Answers 653 Views
General Discussions
This is a migrated thread and some comments may be shown as answers.
Ron
Top achievements
Rank 1
Iron
Iron
Iron
Ron asked on 22 Oct 2018, 09:03 PM

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

Sort by
0
Dimiter Topalov
Telerik team
answered on 24 Oct 2018, 07:29 AM
Hello Ron,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Iron
Iron
Iron
answered on 24 Oct 2018, 12:58 PM

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.

 

0
Dimiter Topalov
Telerik team
answered on 26 Oct 2018, 07:43 AM
Hi Ron,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Iron
Iron
Iron
answered on 31 Oct 2018, 05:19 PM
Dimiter, one change to that - I did notice that it's showing up now, however it's showing up at the bottom of the page rather than in the div where I attempted to invoke it. Let me know if there's a way to make it present in a particular place (such as a page count line in the header) rather than at the top or bottom.
0
Dimiter Topalov
Telerik team
answered on 02 Nov 2018, 02:25 PM
Hello Ron,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
0
Ron
Top achievements
Rank 1
Iron
Iron
Iron
answered on 06 Nov 2018, 07:12 PM

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?

0
Dimiter Topalov
Telerik team
answered on 08 Nov 2018, 10:09 AM
Hi Ron,

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
Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
General Discussions
Asked by
Ron
Top achievements
Rank 1
Iron
Iron
Iron
Answers by
Dimiter Topalov
Telerik team
Ron
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or