Customized page header in Pdf export

5 posts, 0 answers
  1. Henrik
    Henrik avatar
    25 posts
    Member since:
    Nov 2015

    Posted 21 Mar Link to this post

    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

  2. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 22 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  3. Henrik
    Henrik avatar
    25 posts
    Member since:
    Nov 2015

    Posted 23 Mar in reply to Tsvetina Link to this post

    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

  4. Tsvetina
    Admin
    Tsvetina avatar
    2076 posts

    Posted 24 Mar Link to this post

    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
    Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
  5. Henrik
    Henrik avatar
    25 posts
    Member since:
    Nov 2015

    Posted 27 Mar in reply to Tsvetina Link to this post

    Perfect, works like a charm

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

     

    Many thanks!

    Henrik

Back to Top