Webgrid exported to PDF using Rotativa in an MVC application

Question

I am exporting a Webgrid containing 100's of records into a PDF using Rotativa library. I am able to export data successfully to the PDF but the problem is that as he grid is containing so many records, the pdf is having column headers on every page. Because of this, the column header are overlapping with the column content in every page of the PDF. I want to have the column headers only on the first page of the pdf , not on every page.

The partialview (_Report.cshtml) is as follows:

<div id="reportDetailGrid">
        @grid2.GetHtml(
                    tableStyle: "webgrid-table",
             headerStyle: "webgrid-header",
             footerStyle: "webgrid-footer",
             alternatingRowStyle: "webgrid-alternating-row",
             selectedRowStyle: "webgrid-selected-row",
             rowStyle: "webgrid-row-style",
             mode: WebGridPagerModes.All,
            columns: grid2.Columns(
                      grid2.Column("PropertyCode", "PropertyCode", format: @<text>@item.PropertyCode</text>),
                      grid2.Column("TransactionTime", "TransactionTime", format: @<text>@item.TransactionTime</text>),
                      grid2.Column("ConfirmationNo", "ConfirmationNo",format: @<text>@item.ConfirmationNo</text>),
                    grid2.Column("AlertCode", "AlertCode",format: @<text>@item.AlertCode</text>),
                    grid2.Column("ErrorMessage", "ErrorMessage",format: @<text>@item.ErrorMessage</text>)
)
)

    </div>

And the controller code is :

public ActionResult DownloadReportPDF()
    {
      var model = GetReportsViewModelData();
        //Code to get content
        return new Rotativa.PartialViewAsPdf("_Report", model) { FileName = "DigitalDashboardReport.pdf" };
    }

Below is the screenshot of the page second of the PDF:

And it is happening on every page of PDF.

Can anyone please help me in having the column headers only on first page and not on every page of PDF or if their is any other way to style the content to be exported to PDF. Thanks in advance.

Answer 1

I have managed to resolve the issue by adding below styling code in partial view:

thead { display: table-header-group; } 
tfoot { display: table-row-group; } 
tr { page-break-inside: avoid; }