Hi all,
I try to add a watermark on an export to pdf using template model but it doesn't work.
somebody know how to do this ?
here the link of my try :
https://dojo.telerik.com/aGOHaDUt
<!DOCTYPE html>
<html>
<head>
<base href=
"https://demos.telerik.com/kendo-ui/gantt/pdf-export"
>
<style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
<title></title>
<link rel=
"stylesheet"
href=
"https://kendo.cdn.telerik.com/2020.1.406/styles/kendo.default-v2.min.css"
/>
<script src=
"https://kendo.cdn.telerik.com/2020.1.406/js/jquery.min.js"
></script>
<script src=
"https://kendo.cdn.telerik.com/2020.1.406/js/jszip.min.js"
></script>
<script src=
"https://kendo.cdn.telerik.com/2020.1.406/js/kendo.all.min.js"
></script>
</head>
<body>
<script type=
"x/kendo-template"
id=
"page-template"
>
<div class=
"page-template"
>
<div class=
"watermark"
>C O N F I D E N T I A L</div>
</div>
</script>
<div id=
"example"
>
<div id=
"gantt"
></div>
</div>
<style>
/*
Use the DejaVu Sans font for display and embedding in the PDF file.
The standard PDF fonts have no support for Unicode characters.
*/
.k-gantt {
font-family:
"DejaVu Sans"
,
"Arial"
, sans-serif;
}
/* Hide toolbars during export */
.k-pdf-export .k-gantt-toolbar
{
display: none;
}
.page-template .watermark {
font-weight: bold;
font-size: 400%;
text-align: center;
margin-top: 30%;
color:
#aaaaaa;
opacity: 0.1;
transform: rotate(-35deg) scale(1.7, 1.5);
}
</style>
<script>
// Import DejaVu Sans font for embedding
// NOTE: Only required if the Kendo UI stylesheets are loaded
// from a different origin, e.g. cdn.kendostatic.com
kendo.pdf.defineFont({
"DejaVu Sans"
:
"https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans.ttf"
,
"DejaVu Sans|Bold"
:
"https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Bold.ttf"
,
"DejaVu Sans|Bold|Italic"
:
"https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
,
"DejaVu Sans|Italic"
:
"https://kendo.cdn.telerik.com/2016.2.607/styles/fonts/DejaVu/DejaVuSans-Oblique.ttf"
,
"WebComponentsIcons"
:
"https://kendo.cdn.telerik.com/2017.1.223/styles/fonts/glyphs/WebComponentsIcons.ttf"
});
</script>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src=
"https://kendo.cdn.telerik.com/2020.1.406/js/pako_deflate.min.js"
></script>
<script>
$(document).ready(
function
() {
var
serviceRoot =
"https://demos.telerik.com/kendo-ui/service"
;
var
tasksDataSource =
new
kendo.data.GanttDataSource({
batch:
false
,
transport: {
read: {
url: serviceRoot +
"/GanttTasks"
,
dataType:
"jsonp"
},
update: {
url: serviceRoot +
"/GanttTasks/Update"
,
dataType:
"jsonp"
},
destroy: {
url: serviceRoot +
"/GanttTasks/Destroy"
,
dataType:
"jsonp"
},
create: {
url: serviceRoot +
"/GanttTasks/Create"
,
dataType:
"jsonp"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
) {
return
{ models: kendo.stringify(options.models || [options]) };
}
}
},
schema: {
model: {
id:
"id"
,
fields: {
id: { from:
"ID"
, type:
"number"
},
orderId: { from:
"OrderID"
, type:
"number"
, validation: { required:
true
} },
parentId: { from:
"ParentID"
, type:
"number"
, defaultValue:
null
, validation: { required:
true
} },
start: { from:
"Start"
, type:
"date"
},
end: { from:
"End"
, type:
"date"
},
title: { from:
"Title"
, defaultValue:
""
, type:
"string"
},
percentComplete: { from:
"PercentComplete"
, type:
"number"
},
summary: { from:
"Summary"
, type:
"boolean"
},
expanded: { from:
"Expanded"
, type:
"boolean"
, defaultValue:
true
}
}
}
}
});
var
dependenciesDataSource =
new
kendo.data.GanttDependencyDataSource({
transport: {
read: {
url: serviceRoot +
"/GanttDependencies"
,
dataType:
"jsonp"
},
update: {
url: serviceRoot +
"/GanttDependencies/Update"
,
dataType:
"jsonp"
},
destroy: {
url: serviceRoot +
"/GanttDependencies/Destroy"
,
dataType:
"jsonp"
},
create: {
url: serviceRoot +
"/GanttDependencies/Create"
,
dataType:
"jsonp"
},
parameterMap:
function
(options, operation) {
if
(operation !==
"read"
&& options.models) {
return
{ models: kendo.stringify(options.models) };
}
}
},
schema: {
model: {
id:
"id"
,
fields: {
id: { from:
"ID"
, type:
"number"
},
predecessorId: { from:
"PredecessorID"
, type:
"number"
},
successorId: { from:
"SuccessorID"
, type:
"number"
},
type: { from:
"Type"
, type:
"number"
}
}
}
}
});
var
gantt = $(
"#gantt"
).kendoGantt({
dataSource: tasksDataSource,
dependencies: dependenciesDataSource,
views: [
{ type:
"week"
, selected:
true
},
"month"
],
columns: [
{ field:
"id"
, title:
"ID"
, width: 60 },
{ field:
"title"
, title:
"Title"
, editable:
true
, sortable:
true
},
{ field:
"start"
, title:
"Start Time"
, format:
"{0:MM/dd/yyyy}"
, width: 100, editable:
true
, sortable:
true
},
{ field:
"end"
, title:
"End Time"
, format:
"{0:MM/dd/yyyy}"
, width: 100, editable:
true
, sortable:
true
}
],
toolbar: [
"append"
,
"pdf"
],
pdf: {
fileName:
"Kendo UI Gantt Export.pdf"
,
proxyURL:
"https://demos.telerik.com/kendo-ui/service/export"
,
template: $(
"#page-template"
).html()
},
height: 700,
showWorkHours:
false
,
showWorkDays:
false
,
snap:
false
}).data(
"kendoGantt"
);
$(document).bind(
"kendo:skinChange"
,
function
() {
gantt.refresh();
});
});
</script>
</body>
</html>
thx for help :)