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

aspx page contents are very big on exported pdf file

10 Answers 201 Views

ClientExportManager

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

10 Answers, 1 is accepted

answered on 14 May 2019, 07:30 AM

Hi Narendra,

The ClientExportManager is based on the Kendo Drawing API library and both do support inches and mm values as explained in Configuration.

Regardless of the selected metric type the rendered content in the PDF will be a bit bigger. You can test for example this demo - Export Whole Pages and see the differences in this screenshot.

Since the exported text and shapes will be always bigger in the PDF, you may want to use the .k-pdf-export class which is applied only to the exported content and apply a bit smaller fonts than the ones applied in the HTML/aspx page. For more details check this page: Change the Exported Content before Export.

The ClientExportManager uses typographic points unit. The size of the content in pixels matches the size of the output in points (1 pixel = 1/72 inch). This is explained in the PDF Options article -> paperSize setting.
This article could be also helpful Dimensions and CSS Units.

Regards,
Rumen
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 18 Jun 2019, 10:08 AM

Hi,

Please find an example of how to export two divs placed one by one with a chart and a grid inside them in two subsequent pdf pages:

ASPX:

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default2.aspx.cs" Inherits="Default2" %>

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head runat="server">

<title>Untitled Page</title>

</head>

<body>

<form id="form1" runat="server">

<asp:ScriptManager runat="server" />

<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1" >

<PdfSettings PageBreakSelector=".pageBreak" MarginRight="10mm" PaperSize="A4" Landscape="true" />

</telerik:RadClientExportManager>

<telerik:RadButton RenderMode="Lightweight" ID="RadButton1" runat="server" OnClientClicked="exportAllPanelItems" Text="Export Items" AutoPostBack="false" UseSubmitBehavior="false"></telerik:RadButton>

<script>

function exportAllPanelItems() {

var cem = $find("<%=RadClientExportManager1.ClientID%>");

cem.exportPDF($telerik.$(".panel-container"));

}

</script>

<div id="row1" class="panel-container">

<div id="column1">

I am column one

<br />

<telerik:RadHtmlChart runat="server" ID="LineChart" Width="800" Height="500" Transitions="true">

<PlotArea>

<Series>

<telerik:LineSeries Name="Week 15" MissingValues="Interpolate">

<Appearance>

<FillStyle BackgroundColor="Blue" />

</Appearance>

<LabelsAppearance DataFormatString="{0}%" Position="Above" />

<MarkersAppearance MarkersType="Square" BackgroundColor="Blue" />

<SeriesItems>

<telerik:CategorySeriesItem Y="15" />

<telerik:CategorySeriesItem Y="23" />

<telerik:CategorySeriesItem />

<telerik:CategorySeriesItem Y="71" />

<telerik:CategorySeriesItem Y="93" />

<telerik:CategorySeriesItem Y="43" />

<telerik:CategorySeriesItem Y="23" />

</SeriesItems>

</telerik:LineSeries>

<telerik:LineSeries Name="Week 16" MissingValues="Gap">

<Appearance>

<FillStyle BackgroundColor="Red" />

</Appearance>

<LabelsAppearance DataFormatString="{0}%" Position="Above" />

<MarkersAppearance MarkersType="Square" BackgroundColor="Red" />

<SeriesItems>

<telerik:CategorySeriesItem Y="35" />

<telerik:CategorySeriesItem Y="42" />

<telerik:CategorySeriesItem Y="18" />

<telerik:CategorySeriesItem Y="39" />

<telerik:CategorySeriesItem Y="64" />

<telerik:CategorySeriesItem Y="10" />

<telerik:CategorySeriesItem Y="6" />

</SeriesItems>

</telerik:LineSeries>

</Series>

<XAxis MajorTickType="Outside" MinorTickType="Outside">

<Items>

<telerik:AxisItem LabelText="Monday" />

<telerik:AxisItem LabelText="Tuesday" />

<telerik:AxisItem LabelText="Wednesday" />

<telerik:AxisItem LabelText="Thursday" />

<telerik:AxisItem LabelText="Friday" />

<telerik:AxisItem LabelText="Saturday" />

<telerik:AxisItem LabelText="Sunday" />

</Items>

<MajorGridLines Color="#EFEFEF" Width="1" />

<MinorGridLines Color="#F7F7F7" Width="1" />

<TitleAppearance Position="Center" RotationAngle="0" Text="Days" />

</XAxis>

<YAxis MajorTickSize="1" MajorTickType="Outside" MaxValue="100" MinorTickSize="1"

MinorTickType="Outside" MinValue="0">

<LabelsAppearance DataFormatString="{0}%" RotationAngle="0" />

<MajorGridLines Color="#EFEFEF" Width="1" />

<MinorGridLines Color="#F7F7F7" Width="1" />

<TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load" />

</YAxis>

</PlotArea>

<ChartTitle Text="Server CPU Load By Days">

</ChartTitle>

<Legend>

<Appearance Position="Bottom" />

</Legend>

</telerik:RadHtmlChart>

</div>

<div id="column2" class="pageBreak">I am column two <br />

<telerik:RadGrid ID="RadGrid1" runat="server" AllowPaging="True" Width="800px" OnNeedDataSource="RadGrid1_NeedDataSource">

<MasterTableView AutoGenerateColumns="False" DataKeyNames="OrderID">

<Columns>

<telerik:GridBoundColumn DataField="OrderID" DataType="System.Int32"

FilterControlAltText="Filter OrderID column" HeaderText="OrderID"

ReadOnly="True" SortExpression="OrderID" UniqueName="OrderID">

</telerik:GridBoundColumn>

<telerik:GridDateTimeColumn DataField="OrderDate" DataType="System.DateTime"

FilterControlAltText="Filter OrderDate column" HeaderText="OrderDate"

SortExpression="OrderDate" UniqueName="OrderDate">

</telerik:GridDateTimeColumn>

<telerik:GridNumericColumn DataField="Freight" DataType="System.Decimal"

FilterControlAltText="Filter Freight column" HeaderText="Freight"

SortExpression="Freight" UniqueName="Freight">

</telerik:GridNumericColumn>

<telerik:GridBoundColumn DataField="ShipName"

FilterControlAltText="Filter ShipName column" HeaderText="ShipName"

SortExpression="ShipName" UniqueName="ShipName">

</telerik:GridBoundColumn>

<telerik:GridBoundColumn DataField="ShipCountry"

FilterControlAltText="Filter ShipCountry column" HeaderText="ShipCountry"

SortExpression="ShipCountry" UniqueName="ShipCountry">

</telerik:GridBoundColumn>

</Columns>

</MasterTableView>

</telerik:RadGrid>

</div>

<style>

#row1 {

display: flex;

flex-direction: row;

justify-content: space-around;

}

#column1 {

display: flex;

flex-direction: column;

}

#column2 {

display: flex;

flex-direction: column;

}

</style>

</form>

</body>

</html>

Codebehind

using System;

using System.Collections.Generic;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.UI;

using System.Web.UI.WebControls;

using Telerik.Web.UI;

public partial class Default2 : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

}

protected void RadGrid1_NeedDataSource(object sender, GridNeedDataSourceEventArgs e)

{

RadGrid1.DataSource = OrdersTable();

}

private DataTable OrdersTable()

{

DataTable dt = new DataTable();

dt.Columns.Add(new DataColumn("OrderID", typeof(int)));

dt.Columns.Add(new DataColumn("OrderDate", typeof(DateTime)));

dt.Columns.Add(new DataColumn("Freight", typeof(decimal)));

dt.Columns.Add(new DataColumn("ShipName", typeof(string)));

dt.Columns.Add(new DataColumn("ShipCountry", typeof(string)));

dt.PrimaryKey = new DataColumn[] { dt.Columns["OrderID"] };

for (int i = 0; i < 70; i++)

{

int index = i + 1;

DataRow row = dt.NewRow();

row["OrderID"] = index;

row["OrderDate"] = new DateTime(DateTime.Now.Year, DateTime.Now.Month, DateTime.Now.Day, 0, 0, 0).AddHours(index);

row["Freight"] = index * 0.1 + index * 0.01;

row["ShipName"] = "Name " + index;

row["ShipCountry"] = "Country " + index;

dt.Rows.Add(row);

}

return dt;

}

Regards,
Rumen
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 18 Jun 2019, 01:19 PM

Dear Rumen,

thank you, very nice example.

1. from here the problem starts. can't show simple chart / table covering entire page to manager. I want both both line chart and radgrid in singe sheet of pdf. and values in radtable should not overlap, width of each column should properly display values in radgrid. I am using k-pdf-export to set the width of column in radgrid which radgrid is not accepting.

2. my radgrid data is has many rows. table is not continuing to next page. radgrid is print partically in only one sheet

answered on 20 Jun 2019, 02:45 PM

Hi,

If the problem happens in Chrome than it could be due to the size of the markup.

Try registering the pako.js library on the page:

Pako.js is a third party javascript library which you can import in the head tag of the aspx/masterpage page:


<script src="https://cdnjs.cloudflare.com/ajax/libs/pako/1.0.5/pako_deflate.min.js"></script>

Regards,
Rumen
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.