KendoUI forcePageBreak does not display long Partial Views - kendo-ui

Question

I'm currently trying to save a PDF for a web application with many pages. I call the partial views into one main page and use KendoUI to save the DOM into the PDF. Because some of these pages are very long and are variant depending on user input, I need the data to display over multiple pages. Whenever forcePageBreak is not called, KendoUI naturally does this by displaying all the data over multiple pages. Although when I turn on forcePageBreak and set page breaks at the beginning of each Partial in the main page, each Partial will only display one page in the pdf, and the rest of the data is cut off.
Here is an example of the main page's code:
<div class="myCanvas" id="myCanvas">
<div class="page-break">#{Html.RenderPartial("_Page1", Model._VM_Page1);}</div>
<div class="page-break">#{Html.RenderPartial("_Page2", Model._VM_Page2);}</div>
<div class="page-break">#{Html.RenderPartial("_Page3", Model._VM_Page3);}</div>
<div class="page-break">#{Html.RenderPartial("_Page4", Model._VM_Page4);}</div>
<div class="page-break">#{Html.RenderPartial("_Page5", Model._VM_Page5);}</div>
<div class="page-break">#{Html.RenderPartial("_Page6", Model._VM_Page6);}</div>
</div>
<script>
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-break",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
I've tried putting page breaks within the beginning of each partial, to no avail. I've looked into trying to set groups, but I'm not exactly sure I understand if that will solve my problem. And CSS page-break-before: always isn't working. I'm unsure what to do.

Answer 1

The answer seems to be dive deeper for the lowest possible class that can have a page break before.
I generally solved this issue by putting the page breaks on the header classes within each Partial View. For example:
function ExportPdf() {
kendo.drawing
.drawDOM("#myCanvas",
{
forcePageBreak: ".page-header",
paperSize: "A4",
margin: { top: "1cm", bottom: "1cm" },
scale: 0.6,
height: 500,
multiPage: true
})
.then(function (group) {
kendo.drawing.pdf.saveAs(group, "exportFile.pdf");
});
}
Where the logic of my code would be similar to:
<div class="main">
<div class="page-header>
Header
</div>
<div class="ContentContainer">
Content
</div>
</div>
It was weird because I had set the page breaks at the global level where the partials were being called and also at the local level where main was being called, but I needed to dive even deeper to the page-header items to get it to work.

Answer 2

Here is my example working properly
Step 1: All CDNs
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jquery.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/jszip.min.js"></script>
<script src="https://kendo.cdn.telerik.com/2020.2.617/js/kendo.all.min.js"></script>
Step 2: Add div to data div which you have created
<div data-uid="#= uid #" class="#= (id%10 == 0 ? 'page-break' : '') #">
</div>
Step 3: JS code
kendo.drawing.drawDOM("#downloadPDF", {
paperSize: "A4",
margin: {
left: "1cm",
top: "1cm",
right: "1cm",
bottom: "1cm"
},
scale: 0.8,
forcePageBreak: ".page-break"
})
.then(function(group) {
kendo.drawing.pdf.saveAs(group, "plagiarism.pdf")
});