This is a migrated thread and some comments may be shown as answers.

Kendo Pdf export with header template

9 Answers 1152 Views

Grid

This is a migrated thread and some comments may be shown as answers.

arun asked on 29 Aug 2018, 04:12 PM

capture.png

I am having problem with pdf export with header template, we use letter size but however papersize "letter" in pdf export doesn't include all fields and so smaller in size

going up on paper size does help like using A1 is perfect but we use letter for everything,

here below is what I have...

    <div class="page-template">
        <div class="header">
            <div style="border:1px solid black;width:35%;float:left;padding:10px;">
                <div>Scenario: <b>@ViewBag.Rule</b></div>
                <div>Scenario\#: <b>3</b></div>
                <div>
                    <div style="float:left">
                        Run Date: <b>@DateTime.Now.ToShortDateString() </b>
                    </div>
                    <div style="float:right;padding-left:20px;">
                        Rule Version: <b>@ViewBag.RuleVersion</b>
                    </div>
                </div>
                <br />
                <div>Data Ingestion: <b>@ViewBag.DataIngestion.ToShortDateString()</b></div>
            </div>
            <div style="border:1px solid black;float:left;width:20%;padding:10px;margin-left: 15%;">
                <div> Total Patient Population: <b id="TotalPatients1">@ViewBag.TotalPatients</b></div>
                <div>
                    <div style="float:left"> Matching Patient Population: <b id="MatchingPatients1">@ViewBag.MatchingPatients</b> </div> <div style="float:right;margin-right:5%;"> <b id="MatchingPercentage1">@((((double)ViewBag.MatchingPatients / (double)ViewBag.TotalPatients)).ToString("P2"))</b></div>
                </div>
            </div>
        </div>
    </div>
</script>

.Pdf(pdf => pdf
                        .AvoidLinks()
                        .AllPages(true)
                        .PaperSize("Letter")
                        .Margin("5.5cm", "1cm", "1cm", "1cm")
                        .Landscape()
                        .RepeatHeaders(false)
                        .TemplateId("Pdf-template")
                        .FileName("filename.pdf")
                        .ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))
                    )

9 Answers, 1 is accepted

answered on 03 Sep 2018, 08:59 AM

Hi Arun,

You can try applying custom styles to the exported content, so that the Grid and header take up less space. You can decrease the font sizes during export only using the k-pdf-export class to target elements inside the exported Grid. Also, using this class, you can change the Grid column widths, so the Grid information fits better into the page:
Change Column Widths during PDF Export

With regard to the header template, you can apply the smaller font size explicitly in the inline styles that you already have inside the template declaration.

<script type="x/kendo-template" id="Pdf-template">

<div class="page-template">

<div class="header">

<div style="border:1px solid black;width:35%;float:left;padding:10px;font-size:10px">

<div>Scenario: <b>@ViewBag.Rule</b></div>

<div>Scenario\#: <b>3</b></div>

<div>

<div style="float:left">

Run Date: <b>@DateTime.Now.ToShortDateString() </b>

</div>

<div style="float:right;padding-left:20px;">

Rule Version: <b>@ViewBag.RuleVersion</b>

</div>

<br />

<div>Data Ingestion: <b>@ViewBag.DataIngestion.ToShortDateString()</b></div>

</div>

<div style="border:1px solid black;float:left;width:20%;padding:10px;margin-left: 15%;font-size:10px">

<div> Total Patient Population: <b id="TotalPatients1">@ViewBag.TotalPatients</b></div>

<div>

<div style="float:left"> Matching Patient Population: <b id="MatchingPatients1">@ViewBag.MatchingPatients</b> </div> <div style="float:right;margin-right:5%;"> <b id="MatchingPercentage1">@((((double)ViewBag.MatchingPatients / (double)ViewBag.TotalPatients)).ToString("P2"))</b></div>

</div>

</script>

Regards,
Tsvetina
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 06 Sep 2018, 06:29 PM

capture.png

Hi tsvetina,

i applied some changes as u described,

1. however i still cannot figure out why only few records are exported... there needs to be 20 records as i am exporting first page it contains 20 records but i could see only 9 records.

2. Mainly i still don't see grid header

answered on 11 Sep 2018, 10:12 AM

Hello Arun,

There does not seem to be enough space for the Grid content to fit in the page. You can try using a Scale less than 1, as well as change the page orientation to portrait. I tried a Grid with Page Size = 20 with the following settings:

.Pdf(pdf => pdf

.AvoidLinks()

.AllPages(true)

.PaperSize("Letter")

.Margin("3cm", "1cm", "1cm", "1cm")

.Scale(0.6)

.RepeatHeaders(false)

.TemplateId("Pdf-template")

.FileName("filename.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))

)

and it was properly fitted inside the page. Try different combinations of margins, scale and page orientation to see which fits your page and Grid content best.

Regards,
Tsvetina
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 19 Oct 2018, 04:17 PM

Hi Tsvetina,

.net core telerik, pdf export doesn include toolbar, i am not hiding it on export. do i have to anything extra for it to include toolbar

.Pdf(pdf => pdf

.AvoidLinks()

.AllPages(false)

.PaperSize("Letter")

.Landscape(true)

.RepeatHeaders(false)

.FileName("PatientsReport.pdf")

.ProxyURL(Url.Action("Pdf_Export_Save", "Grid"))

)

.ToolBar(toolbar =>

{

toolbar.ClientTemplateId("PatientGridToolbarTemplate");

})

answered on 24 Oct 2018, 12:29 PM

Hello Arun,

Since Q2 2016, the Grid will automaticlly remove the toolbar, footer, pager and grouping header if you set the PaperSize option to anything different than "auto". This is done to allow more meaningful output with the automatic page breaking feature.

You can set PaperSize("auto") in order to have the toolbar show in the Grid or use a page template with a header to replace the toolbar content. An ASP.NET Core example of an export with a template is available in the Grid PDF Export demo.

Regards,
Tsvetina
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.

answered on 26 Oct 2018, 04:20 PM

capture1.png

capture2.png

.Pdf(p=>p.PaperSize("auto"))

.ToolBar(toolbar =>
{
toolbar.ClientTemplateId("PatientGridToolbarTemplate");
})

Accepted

answered on 31 Oct 2018, 01:11 PM

TelerikAspNetCoreApp58.zip

Hello Arun,

I tried the same template in the attached project but on my side the toolbar is exported as well when PaperSize("auto") is set. Could you run the project and see if I am missing anything important?
Also, what version of Kendo UI are you using?

Regards,
Tsvetina
Progress Telerik

Get quickly onboarded and successful with your Telerik and/or Kendo UI products with the Virtual Classroom free technical training, available to all active customers. Learn More.