Header in PDF Plot

@mnikitina, If this comes to you, I swear it's the last one! :grinning:

Now I'm creating a pdf document on save, I just can't get the header sorted.
It's something to do with #page-template I just don't see what.

Code in HTML control

   <div class="page-template" id="page-template">
            <div class="header">
                <div style="float: right">Page #: pageNum # of #: totalPages #</div>
                Beveridge Williams - Mobile Start Card
            </div>
    </div>

JavaScript

fd.spBeforeSave(function(spForm) {
    
    //PrintPDF On Save
    fd.exportToPDF('Start Card ' + fd.field('Title').value + ' ' + today, {
        forcePageBreak: ".breaker",
        paperSize: 'A4',
        landscape: false,
        multiPage: true,
        keepTogether: ".prevent-split",
        scale: 0.8,
        template: $("#page-template").html()     
    });
});

CSS

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

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

.k-pdf-export .page-template .footer {
    display: none !important;
}

Result

It's essentially this example from Kendo:

http://dojo.telerik.com/EPUVif

So, I'm not sure what I'm doing wrong.
I could place a header on each page and not have page number, but that kinda defeats the purpose of a page template.

A big thanks to anyone who can help me wrap this up!

Adam

Resolved!

Sometimes it just takes a break and to keep it simple.

Code in HTML control

<div id="page-template">
    <div class="page-template">
        <div style="float: right">Page #: pageNum # of #: totalPages #</div>
        Beveridge Williams - Mobile Start Card
    </div>
</div>

JavaScript

No Change

CSS

/* Just this*/
    .k-pdf-export .page-template {
        position: absolute;
        top: 30px;
        left: 30px;
        right: 30px;
        border-bottom: 1px solid #888;
        color: #888;
    }

Result

Nice! At least this might help someone else. :grinning:

1 Like