Customized page header in Pdf export

[Henrik]

Hi,

I am using the Pdf export to print a grid. In the page header on each page I would like to have content from the model (or the ViewBag or some other way), in any case data that I can set in the method in the controller when I load the ViewModel for the page. I have found a lot of info about the page headers, but the page number is the only variable data I have seen.

I would like to show something like "Inventory as of Dec 3rd, report printed March 21st", so not only page number and today's date but other stuff too.

Is this possible and if so, can someone please point me in the right direction for info on this?

 

Best regards,

Henrik

[Tsvetina]

Hello Henrik,

The PDF export will export whatever you render in the header section of the export template. In the case of the PDF export demo, the header will contain the highlighted part of this template (with the bindings evaluated):

<script type="x/kendo-template" id="page-template">
      <div class="page-template">
        <div class="header">
          <div style="float: right">Page #: pageNum # of #: totalPages #</div>
          Multi-page grid with automatic page breaking
        </div>
        <div class="watermark">KENDO UI</div>
        <div class="footer">
          Page #: pageNum # of #: totalPages #
        </div>
      </div>
    </script>

If you render text or HTML inside the header section from the Model or ViewBag, this new content will be included in the exported PDF file. Have you tried this and do you encounter any problems? In such case, please show us the contents of your template.

Regards,
Tsvetina
Telerik by Progress

[Henrik]

Hi, thanks for the response.

 

What I don't understand is how to get the ViewBag or model info into the template. I've tried this:

Controller:                 ViewBag.Location = "Flagship store";
.cshtml, in the grid definition:

.Pdf(pdf => pdf
.AllPages()
    .AvoidLinks()
    .PaperSize("A4")
    .Scale(0.75)
    .Margin("2cm", "2cm", "1cm", "2cm")
    .RepeatHeaders()
    .TemplateId("inventory-template")
    .FileName($"Inventory_{DateTime.Today.ToShortDateString()}.pdf")
    .ProxyURL(Url.Action("Index", "Grid"))
)

And the template:
<script type="x/kendo-template" id="inventory-template">
    <div class="inventory-template">
        <div class="header">
            Inventory of #: ViewBag.Location #
            <span class="date-header"></span>
        </div>
        <div class="footer">
            Sida #: pageNum # av #: totalPages #
        </div>
    </div>
</script>

This gives me a JavaScript runtime error: 'ViewBag' is undefined

If I replace the ViewBag with a model parameter I get the same error.

I am probably making a basic script syntax error, but I can't get it right. Can you please give me an indication of how it should be done?

 

Best regards,

Henrik

[Tsvetina]

Hi Henrik,

You don't need to use template expressions, just render the ViewBag value as a string in the template:

<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            @ViewBag.Date
        </div>
        <div class="watermark">KENDO UI</div>
        <div class="footer">
            Page #: pageNum # of #: totalPages #
        </div>
    </div>
</script>

I am attaching my test project to this message for your reference.

Regards,
Tsvetina
Telerik by Progress

[Doris]

this prints everything in the footer instead of footer and header. Why is this?

<script type="x/kendo-template" id="page-template">

    <div class="page-template">

        <div class="header">

            <div style="float: right">Page #: pageNum # of #: totalPages #</div>

            @ViewBag.Date

        </div>

        <div class="watermark">KENDO UI</div>

        <div class="footer">

            Page #: pageNum # of #: totalPages #

        </div>

    </div>

</script>

[Doris]

I was able to print correctly but needed to add styles, etc.

[Anton Mironov]

Hi Doris,

Thank you for the details provided.

The following article describes the specifics of the PDF Export:

• https://docs.telerik.com/devtools/document-processing/getting-started/installation/pdf-export

Using PdfFormatProvider:

• https://docs.telerik.com/devtools/document-processing/libraries/radspreadprocessing/formats-and-conversion/pdf/pdfformatprovider

You can change the appearance of the PDF output as it appears in the browser while you draw the DOM elements by using CSS rules that apply only to the PDF output:

• https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/custom-appearance

I hope this information helps.


Kind Regards,
Anton Mironov

 

[Henrik]

Perfect, works like a charm

So simple, I should have found out that by myself.

 

Many thanks!

Henrik