Skip to content

Commit a228f4b

Browse files
JekataJekata
committed
docs(clientexportmanager): page templates
1 parent a8ba639 commit a228f4b

File tree

2 files changed

+117
-1
lines changed

2 files changed

+117
-1
lines changed

‎controls/clientexportmanager/functionality/header-and-footer-templates.md

+116
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,116 @@
1+
---
2+
title: Page Templates
3+
page_title: Page Templates - RadClientExportManager
4+
description: Render header and footer templates on each page when you export content in PDF with RadClientExportManager for ASP.NET AJAX
5+
slug: clientexportmanager/functionality/header-and-footer-templates
6+
tags: header,footer,headers,export,template
7+
published: True
8+
position: 4
9+
---
10+
11+
# Page Templates
12+
13+
When you request multi-page output through the `PageBreakSelector` or `paperSize`, you can additionally specify a header and footer page template.
14+
15+
##
16+
17+
This template will be inserted into each page before producing the output. You can easily position it relatively to the page with CSS. The template can be a function, or a [Kendo UI template](https://docs.telerik.com/kendo-ui/framework/templates/overview), and it receives the number of the current page (`pageNum`) and the total number of pages (`totalPages`).
18+
19+
````ASP.NET
20+
<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1"></telerik:RadClientExportManager>
21+
22+
<input type="button" onclick="exportElement();return false;" value="export" />
23+
24+
<script type="text/javascript">
25+
function exportElement() {
26+
var exp = $find("<%= RadClientExportManager1.ClientID %>");
27+
var pdfSettings = {
28+
fileName: "PDF-Export",
29+
30+
margin: { top: 25, left: 15, bottom: 10, right: 5 },
31+
paperSize: "A4",
32+
landscape: "Portrait",
33+
title: "PDF",
34+
author: "UserName",
35+
subject: "Export to PDF",
36+
keywords: "a keyword",
37+
creator: "John",
38+
template: $telerik.$("#page-template").html(),
39+
date: new Date(2015, 10, 25),
40+
forcePageBreak: ".page-break"
41+
};
42+
exp.exportPDF($telerik.$("#panel-container"), pdfSettings);
43+
}
44+
</script>
45+
<style>
46+
/*
47+
Make sure everything in the page template is absolutely positioned.
48+
All positions are relative to the page container.
49+
*/
50+
.page-template > * {
51+
position: absolute;
52+
left: 20px;
53+
right: 20px;
54+
font-size: 90%;
55+
}
56+
57+
.page-template .header {
58+
top: 20px;
59+
border-bottom: 1px solid #000;
60+
}
61+
62+
.page-template .footer {
63+
bottom: 20px;
64+
border-top: 1px solid #000;
65+
}
66+
</style>
67+
68+
<div id="panel-container">
69+
<p>
70+
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Integer felis
71+
libero, lobortis ac rutrum quis, varius a velit. Donec lacus erat,
72+
cursus sed porta quis, adipiscing et ligula. Duis volutpat, sem pharetra
73+
accumsan pharetra, mi ligula cursus felis, ac aliquet leo diam eget
74+
risus. Integer facilisis, justo cursus venenatis vehicula, massa nisl
75+
tempor sem, in ullamcorper neque mauris in orci.
76+
</p>
77+
<p class="page-break">
78+
Ut orci ligula, varius ac consequat in, rhoncus in dolor. Mauris
79+
pulvinar molestie accumsan. Vestibulum ante ipsum primis in faucibus
80+
orci luctus et ultrices posuere cubilia Curae; Aenean velit ligula,
81+
pharetra quis aliquam sed, scelerisque sed sapien. Class aptent taciti
82+
sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.
83+
Aliquam dui mi, vulputate vitae pulvinar ac, condimentum sed eros.
84+
</p>
85+
<p class="page-break">
86+
Aliquam at nisl quis est adipiscing bibendum. Nam malesuada eros
87+
facilisis arcu vulputate at aliquam nunc tempor. In commodo scelerisque
88+
enim, eget sodales lorem condimentum rutrum. Phasellus sem metus,
89+
ultricies at commodo in, tristique non est. Morbi vel mauris eget mauris
90+
commodo elementum. Nam eget libero lacus, ut sollicitudin ante. Nam odio
91+
quam, suscipit a fringilla eget, dignissim nec arcu. Donec tristique
92+
arcu ut sapien elementum pellentesque.
93+
</p>
94+
</div>
95+
<script type="x/kendo-template" id="page-template">
96+
<div class="page-template">
97+
<div class="header">
98+
<div style="float: right">Page #:pageNum# of #:totalPages#</div>
99+
This is a header.
100+
</div>
101+
<div class="footer">
102+
This is a footer.
103+
Page #:pageNum# of #:totalPages#
104+
</div>
105+
</div>
106+
</script>
107+
````
108+
109+
# See Also
110+
111+
* [Kendo UI Drawing API Page Templates](https://docs.telerik.com/kendo-ui/framework/drawing/pdf-output/page-templates)
112+
* [PDF Multi-page Export]({%slug clientexportmanager/functionality/pdf-multi-page-export %})
113+
* [Client-Side Programming Overview]({%slug clientexportmanager/client-side-programming/overview %})
114+
115+
116+

‎controls/clientexportmanager/functionality/repeat-headers.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -5,7 +5,7 @@ description: Render table headers on each page when you export content in PDF wi
55
slug: clientexportmanager/functionality/repeat-headers
66
tags: repeat,table,headers,export
77
published: True
8-
position: 4
8+
position: 5
99
---
1010

1111
# Repeated Table Headers

0 commit comments

Comments
 (0)