This is a migrated thread and some comments may be shown as answers.

Export to PDF - Add PDF Header / TItle

10 Answers 1295 Views
Grid
This is a migrated thread and some comments may be shown as answers.
Randy
Top achievements
Rank 1
Randy asked on 05 Apr 2017, 10:51 PM
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?

10 Answers, 1 is accepted

Sort by
0
Dimiter Topalov
Telerik team
answered on 06 Apr 2017, 08:42 AM
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
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.
0
Randy
Top achievements
Rank 1
answered on 06 Apr 2017, 01:57 PM
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.
0
Dimiter Topalov
Telerik team
answered on 06 Apr 2017, 03:12 PM
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
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.
0
Gary Goodwin
Top achievements
Rank 1
answered on 17 May 2018, 01:20 PM

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

Company Name

Address 1

Address 2

0
Gary Goodwin
Top achievements
Rank 1
answered on 17 May 2018, 01:21 PM
Also in KendoUi Angular Grid
0
Gary Goodwin
Top achievements
Rank 1
answered on 17 May 2018, 01:21 PM
In Kendo Angular Grid PDF export as indicated above multiline header.
0
Dimiter Topalov
Telerik team
answered on 21 May 2018, 10:00 AM
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
Try our brand new, jQuery-free Angular components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 03 Dec 2019, 06:35 PM
This link goes to a 404 page.
0
Lee
Top achievements
Rank 1
Iron
Iron
Iron
answered on 03 Dec 2019, 06:36 PM
http://docs.telerik.com/kendo-ui/controls/data-management/grid/pdf-export#page-template goes to a 404 page.
0
Dimiter Topalov
Telerik team
answered on 04 Dec 2019, 09:37 AM

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

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.
Tags
Grid
Asked by
Randy
Top achievements
Rank 1
Answers by
Dimiter Topalov
Telerik team
Randy
Top achievements
Rank 1
Gary Goodwin
Top achievements
Rank 1
Lee
Top achievements
Rank 1
Iron
Iron
Iron
Share this question
or