Export to PDF - Add PDF Header / TItle

[Randy]

I have a grid with the ability to export to PDF. When the user clicks on the Export to PDF, I'd like to prompt the user to enter a header / title that will appear as a header in the PDF document that will get created. Is it possible to do this?

[Dimiter Topalov]

Hi Randy,

You can use the approach, demonstrated in the following section of our documentation to create custom headers and footers for the exported document:

http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#page-template

... and handle the pdfExport event to include the custom logic, required for obtaining the custom text that will appear in the header, e.g.:

http://dojo.telerik.com/Ovegu

I hope this helps.

Regards,
Dimiter Topalov
Telerik by Progress

[Randy]

Thank you Dimiter for your help. This does help, except for one thing. How do I wire up the pdfExport even when using MVC? All the examples I see are for using JavaScript.

[Dimiter Topalov]

Hello Randy,

The Razor syntax for handling the pdfExport event is as follows:

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.ProductViewModel>()

      .Name("grid")

      .Columns(columns =>

      {

          columns.Bound(p => p.ProductName).Title("Product Name");

          columns.Bound(p => p.UnitPrice).Title("Unit Price");

          columns.Bound(p => p.UnitsInStock).Title("Units In Stock");

      })

      .Pageable()

      .Sortable()

      .Filterable()

      .Groupable()

      .Scrollable()

      .Selectable(selectable => selectable

          .Mode(GridSelectionMode.Multiple)

          .Type(GridSelectionType.Cell))

      .Events(events => events

          .PdfExport("onPdfExport")

          // other event handlers

          .Change("onChange")

          .DataBound("onDataBound")

          .DataBinding("onDataBinding")

          .Sort("onSorting")

          .Filter("onFiltering")

          .Group("onGrouping")

          .Page("onPaging")

      )

      .DataSource(dataSource => dataSource

          .Ajax()

          .Read(read => read.Action("Products_Read", "Grid"))

       )

  )

...
<script type="text/javascript">
    var customHeader = '';
    function onPdfExport(e) {
        customHeader = prompt('Enter text for the header');
    }

// other event handlers

    function onChange(arg) {
        var selected = $.map(this.select(), function (item) {
            return $(item).text();
        });

        kendoConsole.log("Selected: " + selected.length + " item(s), [" + selected.join(", ") + "]");
    } ...


Regards,
Dimiter Topalov
Telerik by Progress

[Gary Goodwin]

Can you show that example with a multi8-line header: Like -

Company Name

Address 1

Address 2

[Gary Goodwin]

Also in KendoUi Angular Grid

[Gary Goodwin]

In Kendo Angular Grid PDF export as indicated above multiline header.

[Dimiter Topalov]

Hi Gary,

The Kendo UI for Angular Grid provides the opportunity to set a page template as described in the following section of our documentation:

https://www.telerik.com/kendo-angular-ui/components/grid/export/pdf-export/#toc-specifying-page-template

You can customize its contents and make sure that there is enough space available to show the whole template via the kendo-pdf-margin component as well as CSS:

<kendo-grid-pdf-margin top="4cm" left="1cm" right="1cm" bottom="2cm"></kendo-grid-pdf-margin>...

styles: [`
        .page-template {
          font-family: "DejaVu Sans", "Arial", sans-serif;
          position: absolute;
          width: 100%;
          height: 100%;
          top: 0;
          left: 0;
        }

        .page-template .header {
          position: absolute;
          top: 30px;
          left: 30px;
          right: 30px;
          border-bottom: 1px solid #888;
          color: #888;
        }

        .page-template .footer {
          position: absolute;
          bottom: 30px;
          left: 30px;
          right: 30px;
          border-top: 1px solid #888;
          text-align: center;
          color: #888;
    }`]

Here is an example, illustrating the described approach:

https://plnkr.co/edit/y4vu32NMiYoMpxDDPJnN?p=preview

I hope this helps.

Regards,
Dimiter Topalov
Progress Telerik

[Lee]

This link goes to a 404 page.

[Lee]

http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#page-template goes to a 404 page.

[Dimiter Topalov]

Hello Lee,

The said documentation section was moved to:

https://docs.telerik.com/kendo-ui/controls/data-management/grid/export/pdf-export#specifying-page-templates

We apologize for any inconvenience caused.

Regards,
Dimiter Topalov
Progress Telerik