PDF - Personalization

[Frank]

Hello I have some trouble with a grid, when i try to add a Template in order to generate a personalizated Pdf file.

I wrote many times the example is shown by Telerik, but I only get a grid without  the template.

I can´t see the pagination #pages nr etc.

My code is:

<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-grid {
        font-family: "DejaVu Sans", "Arial", sans-serif;
        width: 750px;
        height: 350px;
    }

    /* Hide the Grid header and pager during export */

    .k-pdf-export .k-grid-toolbar,
    .k-pdf-export .k-pager-wrap {
        display: none;
    }
</style>


<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="~/Scripts/pako.min.js"></script>


<script type="x/kendo-template" id="page-template">
    <div class="page-template">
        <div class="header">
            <div style="float: right">Page #: pageNum # of #: totalPages #</div>
            Multi-page grid with automatic page breaking
        </div>
        <div class="watermark">KENDO UI</div>
        <div class="footer">
            Page #: pageNum # of #: totalPages #
        </div>
    </div>
</script>

<div class="box wide">
    <p style="margin-bottom: 1em"><b>Important:</b></p>

    <p style="margin-bottom: 1em">
        This page loads
        <a href="https://github.com/nodeca/pako">pako zlib library</a> (pako_deflate.min.js)
        to enable compression in the PDF. This is highly recommended as it improves
        performance and rises the limit on the size of the content that can be exported.
    </p>

    <p>
        The Standard PDF fonts do not include Unicode support.

        In order for the output to match what you see in the browser
        you must provide source files for TrueType fonts for embedding.

        Please read the documentation about
        <a href="http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#custom-fonts-and-pdf">custom fonts</a>
        and
        <a href="http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#using-custom-fonts">drawing</a>.
    </p>
</div>

@(Html.Kendo().Grid<Bams.Models.ListePdf>()
        .Name("grid")
        .ToolBar(tools => tools.Pdf())
        .Pdf(pdf => pdf
            .AllPages()
            .AvoidLinks()
            .PaperSize("A4")
            .Scale(0.8)
            .Margin("2cm", "1cm", "1cm", "1cm")
            .Landscape()
            .RepeatHeaders()
            .TemplateId("page-template")
            .FileName("Kendo UI Grid Export.pdf")
            .ProxyURL(Url.Action("Pdf_Export_Save", "Test"))
        )
        .Columns(columns =>
        {
            columns.Bound(c => c.Id)
              .Width(20).Title("Nr");
            columns.Bound(c => c.Name).Width(50).Title("Name");
            columns.Bound(c => c.Beschreibung).Width(50).Title("Beschr.");
            columns.Bound(c => c.Hersteller).Width(30).Title("Herst.");
            columns.Bound(c => c.Alias).Width(30).Title("Alias");
            columns.Bound(c => c.Datums).Width(20).Title("Datum");
        })
        .HtmlAttributes(new { style = "height: 550px;" })
        .Scrollable()
        //.Groupable()
        .Sortable()
        .Pageable(pageable => pageable
            .Refresh(true)
            .PageSizes(true)
            .ButtonCount(5))
        .DataSource(dataSource => dataSource
            .Ajax()
            .Read(read => read.Action("getListe", "Test"))
            .PageSize(2)
        )
)
<style>
    /* Page Template for the exported PDF */
    .page-template {
        font-family: "DejaVu Sans", "Arial", sans-serif;
        position: absolute;
        left: 20px;
        right: 20px;
        font-size: 40%;
    }

        .page-template .header {
            top: 10px;
            border-bottom: 1px solid #000;
        }

        .page-template .footer {
            bottom: 10px;
            border-top: 1px solid #000;
        }
</style>

 

What is Wrong?????

[Maria Ilieva]

Hi Frank,

I revise the provided code and it looks correct to me without any obvious reason for the issue you are facing. You can check the online demo below that demonstrates the same scenario and see what the difference in your case is.
http://demos.telerik.com/aspnet-mvc/grid/pdf-export

Regards,
Maria Ilieva
Telerik by Progress

[Frank]

Thank you very much for your response,

I extract a litlle code from your webpage(“example”) : view-source:http://demos.telerik.com/aspnet-mvc/grid/pdf-export
I found that seems to be a kendoGrid with another notation as a Aspnet MVC Telerik.
Is there a possibility to get an example or to explain me some differences between this kendo grid as showing and the other notation? I tried to mix the two variants with no success. For example to create a Controller to return a Json List and reply to the kendo grid but no works.
(Example from website)
<script>
$(document).ready(function () {
$("#grid").kendoGrid({
toolbar: ["pdf"],
pdf: {
allPages: true,
avoidLinks: true,
paperSize: "A4",
margin: { top: "2cm", left: "1cm", right: "1cm", bottom: "1cm" },
landscape: true,
repeatHeaders: true,
template: $("#page-template").html(),
scale: 0.8
},
dataSource: {
type: "odata",
transport: {
read: "//demos.telerik.com/kendo-ui/service/Northwind.svc/Customers"
},
pageSize: 20
},
height: 550,
sortable: true,
pageable: {
refresh: true,
pageSizes: true,
buttonCount: 5
},
columns: [{
template: "<div class='customer-photo'" +
"style='background-image: url(../content/web/Customers/#:data.CustomerID#.jpg);'></div>" +
"<div class='customer-name'>#: ContactName #</div>",
field: "ContactName",
title: "Contact Name",
width: 240
}, {
field: "ContactTitle",
title: "Contact Title"
}, {
field: "CompanyName",
title: "Company Name"
}, {
field: "Country",
width: 150
}]
});
});
</script>

(Code to realize from Example Code) for ASP.NET MVC

@(Html.Kendo().Grid<Kendo.Mvc.Examples.Models.CustomerViewModel>()        .Name("grid")        .ToolBar(tools => tools.Pdf())        .Pdf(pdf => pdf            .AllPages()            .AvoidLinks()            .PaperSize("A4")            .Scale(0.8)            .Margin("2cm", "1cm", "1cm", "1cm")            .Landscape()            .RepeatHeaders()            .TemplateId("page-template")            .FileName("Kendo UI Grid Export.pdf")            .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))        )        .Columns(columns =>        {            columns.Bound(c => c.ContactName).ClientTemplate(                    @"<div class='customer-photo'                        style='background-image: url(../../content/web/Customers/#:data.CustomerID#.jpg);'></div>                    <div class='customer-name'>#: ContactName #</div>")              .Width(240);            columns.Bound(c => c.ContactTitle);            columns.Bound(c => c.CompanyName);            columns.Bound(c => c.Country).Width(150);

[Maria Ilieva]

Hi,

Note that the Kendo Grid component and the RadGrid for ASP .NET MVC are different components. The difference between Kendo UI Complete and UI for ASP.NET MVC is that the latter incorporates ASP.NET MVC server wrappers, which allow you to define your code logic in server code and utilize features of the ASP.NET MVC framework. You should either use the Kendo Grid or its server wrapper for MVC.
Please let us know what exactly your requirements are so that we can suggest the best option for your case.

Regards,
Maria Ilieva
Telerik by Progress

[Frank]

Hello,

thank you very much for response,

I have a grid with 4 columns and i want to print it with a Header and footer like your example http://demos.telerik.com/aspnet-mvc/grid/pdf-export, but my Problem is that i get a generated pdf files like my attached file.

my css files and js on the layout_cs files are:

<link href="~/Scripts/kendo.common.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo.default.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo.common-bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="~/Content/kendo.dataviz.min.css" rel="stylesheet" type="text/css" />
<link href="~/Scripts/kendo.bootstrap.min.css" rel="stylesheet" />
<link href="~/Scripts/kendo.dataviz.bootstrap.min.css" rel="stylesheet" />
<link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.4.0/css/font-awesome.min.css">
<script src="~/Scripts/jquery-1.10.2.min.js"></script>
<script src="~/Scripts/jquery.min.js"></script>
<script src="~/Scripts/jquery.signalR-2.2.0.js"></script>
<script src="~/Scripts/jszip.min.js"></script>
<script src="~/Scripts/kendo.all.min.js"></script>
<script src="~/Scripts/kendo.aspnetmvc.min.js"></script>
<script src="~/Scripts/cultures/kendo.culture.de-DE.min.js"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.js")"></script>
<script src="@Url.Content("~/Scripts/jquery.validate.unobtrusive.js")"></script>
<script src="@Url.Content("~/Scripts/styled.js")"></script>
<script src="@Url.Content("~/Scripts/kendo.modernizr.custom.js")"></script>
<script src="@Url.Content("~/signalr/hubs")"></script>
@Styles.Render("~/Content/css")

********************************************************************************************************************************

on the view Print.cshtml

<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-grid {
font-family: "DejaVu Sans", "Arial", sans-serif;
}
/* Hide the Grid header and pager during export */
.k-pdf-export .k-grid-toolbar,
.k-pdf-export .k-pager-wrap {
display: none;
}
</style>
<!-- Load Pako ZLIB library to enable PDF compression -->
<script src="@Url.Content("~/Scripts/pako.min.js")"></script>
<script type="x/kendo-template" id="page-template">
<div class="page-template">
<div class="header">
<div style="float: right">Page #: pageNum # of #: totalPages #</div>
Multi-page grid with automatic page breaking
</div>
<div class="watermark">KENDO UI</div>
<div class="footer">
Page #: pageNum # of #: totalPages #
</div>
</div>
</script>
<div class="box wide">
<p style="margin-bottom: 1em"><b>Important:</b></p>
<p style="margin-bottom: 1em">
This page loads
<a href="https://github.com/nodeca/pako">pako zlib library</a> (pako_deflate.min.js)
to enable compression in the PDF. This is highly recommended as it improves
performance and rises the limit on the size of the content that can be exported.
</p>
<p>
The Standard PDF fonts do not include Unicode support.
In order for the output to match what you see in the browser
you must provide source files for TrueType fonts for embedding.
Please read the documentation about
<a href="http://docs.telerik.com/kendo-ui/framework/drawing/drawing-dom#custom-fonts-and-pdf">custom fonts</a>
and
<a href="http://docs.telerik.com/kendo-ui/framework/drawing/pdf-output#using-custom-fonts">drawing</a>.
</p>
</div>
@(Html.Kendo().Grid<Bams.Models.ListePdf>()
.Name("grid")
.ToolBar(tools => tools.Pdf())
.Pdf(pdf => pdf
.AllPages()
.AvoidLinks()
.PaperSize("A4")
.Scale(0.8)
.Margin("2cm", "1cm", "1cm", "1cm")
.Landscape()
.RepeatHeaders()
.TemplateId("page-template")
.FileName("Kendo UI Grid Export.pdf")
.ProxyURL(Url.Action("Pdf_Export_Save", "Test"))
)
.Columns(columns =>
{
columns.Bound(c => c.Id)
.Width(65).Title("Nr");
columns.Bound(c => c.Name).Width(65).Title("Name");
columns.Bound(c => c.Beschreibung).Title("Beschr.");
columns.Bound(c => c.Hersteller).Title("Herst.");
columns.Bound(c => c.Alias).Title("Alias");
columns.Bound(c => c.Datums).Title("Datum");
})
.HtmlAttributes(new { style = "height: 550px;" })
.Scrollable()
// .Groupable()
.Sortable()
.Pageable(pageable => pageable
.Refresh(true)
.PageSizes(true)
.ButtonCount(5))
.DataSource(dataSource => dataSource
.Ajax()
.Read(read => read.Action("getListe", "Test"))
.PageSize(2)
)
)
<style>
/* Page Template for the exported PDF */
.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;
}
.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);
}
/* Content styling */
.customer-photo {
display: inline-block;
width: 32px;
height: 32px;
border-radius: 50%;
background-size: 32px 35px;
background-position: center center;
vertical-align: middle;
line-height: 32px;
box-shadow: inset 0 0 1px #999, inset 0 0 10px rgba(0,0,0,.2);
margin-left: 5px;
}
.customer-name {
display: inline-block;
vertical-align: middle;
line-height: 32px;
padding-left: 3px;
}
</style>

i dont know what could be... :(

thanks.

F.

 

 

[Frank]

Hello,

I found on my project two errors.

the file Site.css pushed all the grid to the left. so i decided not to call it and i changed to last kendo files 2016.2.607. for js and css files.

Thanks a lot. F.