Telerik Forums / Kendo UI for jQuery
This is a migrated thread and some comments may be shown as answers.

export pdf add watermark

2 Answers 485 Views
Gantt
This is a migrated thread and some comments may be shown as answers.
Ry
Top achievements
Rank 1
Ry asked on 21 Apr 2020, 10:14 AM

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>
    <style>html { font-size: 14px; font-family: Arial, Helvetica, sans-serif; }</style>
    <title></title>
 
     
     
 
 
 
</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",
    });
</script>
 
<!-- Load Pako ZLIB library to enable PDF compression -->
 
<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 :)

2 Answers, 1 is accepted

Sort by
0
Accepted
Veselin Tsvetanov
Telerik team
answered on 23 Apr 2020, 06:24 AM

Hi Ry,

I am afraid that the Gantt PDF export functionality does not offer support for templates. Having that said, applying a watermark to the exported Gantt chart would not be possible at this stage.

Regards,
Veselin Tsvetanov
Progress Telerik

Progress is here for your business, like always. Read more about the measures we are taking to ensure business continuity and help fight the COVID-19 pandemic.
Our thoughts here at Progress are with those affected by the outbreak.
0
Ry
Top achievements
Rank 1
answered on 23 Apr 2020, 07:33 AM

ok.... Thx for your answer, too bad for me ^^'

So I'd try to do this on server-side with option proxyURL ;)

Tags
Gantt
Asked by
Ry
Top achievements
Rank 1
Answers by
Veselin Tsvetanov
Telerik team
Ry
Top achievements
Rank 1
Share this question
or