Manual page breaking not splitting my page and overflow not showing

[ProgramBear]

Hi There,

I'm currently trying to use the Kendo PDF Export Function using Kendo Drawing and have been struggling to split the page of dynamic widgets into 2 and it cuts off the bottom of the page and doesnt go onto a second page even when using force page break.

 

Is there any function to check if the page is overflowing? so I can adjust the table template with extra white space.

Or how can I amend this issue and make the page flow onto 2 pages even if the element ends up getting split in 2.

Attempt without page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45,
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

 

<div #elm >
...content...
</div>

 

In the image of the pdf, the bottom of the grid is cut off, then I did the same with text and the text template isnt even visible and doesnt flow onto the next page.

 

Attempt with Page breaking:

const drawing = awaitdrawDOM(this.elm.nativeElement, {
      paperSize: 'a4',
      scale: 0.45, 
      forcePageBreak: '.page-break',
    });

const myData = await exportPDF(drawing);

saveAs(myData, `test.pdf`);

 

Child Component with page breaking:

<div class=".page-break"></div>
<div class="h-full flex flex-col">
...content...
</div>

 

 

Grid component with page breaking

<div class="h-full flex flex-col page-break">

<ngContainer... *gridTemplate></ng-container>

...content...
</div>

<ngTemplate  #gridTemplate>
...Kendo Grid...
</ngTemplate>