PDF - Personalization

6 posts, 0 answers
  1. Frank
    Frank avatar
    6 posts
    Member since:
    Jun 2010

    Posted 14 Jul Link to this post

    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?????

  2. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 15 Jul Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  3. UI for ASP.NET MVC is VS 2017 Ready
  4. Frank
    Frank avatar
    6 posts
    Member since:
    Jun 2010

    Posted 19 Jul in reply to Maria Ilieva Link to this post

    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);

  5. Maria Ilieva
    Admin
    Maria Ilieva avatar
    4017 posts

    Posted 20 Jul Link to this post

    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
    Do you want to have your say when we set our development plans? Do you want to know when a feature you care about is added or when a bug fixed? Explore the Telerik Feedback Portal and vote to affect the priority of the items
  6. Frank
    Frank avatar
    6 posts
    Member since:
    Jun 2010

    Posted 25 Jul Link to this post

    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.

     

     

  7. Frank
    Frank avatar
    6 posts
    Member since:
    Jun 2010

    Posted 27 Jul in reply to Frank Link to this post

    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.

     

Back to Top
UI for ASP.NET MVC is VS 2017 Ready