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 36 Views
ClientExportManager
This is a migrated thread and some comments may be shown as answers.
narendra
Top achievements
Rank 1
narendra asked on 09 May 2019, 10:29 AM

Hi,

i am trying to export multiple radgrid and radhtmlchart to multiple pdf pages. i am able to export but content on aspx page is very big on pdf file. the contents are getting cut and only left most part is partially printed. how can i make contents in my webform (aspx) get printed as is to pdf with same size.

page break is working fine, but the content is getting exported so big that only left more content is printed little.

i have followed the below links but no use:

https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/functionality/export-html-elements

https://docs.telerik.com/devtools/aspnet-ajax/controls/clientexportmanager/functionality/pdf-multi-page-export

10 Answers, 1 is accepted

Sort by
0
Rumen
Telerik team
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.
0
narendra
Top achievements
Rank 1
answered on 12 Jun 2019, 11:35 AM

.k-pdf-export  is helpful but making two divs side by side. show radgrid in 1st div and radhtmlchart in 2nd div is very difficult

it is not simple and straight. can anyone help me with some code to implement above mentioned requirement.

 

 

 

0
Rumen
Telerik team
answered on 13 Jun 2019, 01:40 PM
Can you send screenshots of what you have tried, what has happened and doesn't look good and of what you'd like to achieve?

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.
0
narendra
Top achievements
Rank 1
answered on 13 Jun 2019, 02:09 PM
sorry, its a company data so can't share screenshot. please imagine two div side by side with one div displaying radgrid and another grid showing radhtmlchart (linechart). please try it and see how using .k-pdf-export to export these two divs side by side in landscape is difficult. 
0
Rumen
Telerik team
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>
 
 
<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>
        </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.
0
narendra
Top achievements
Rank 1
answered on 18 Jun 2019, 12:34 PM
not able to download pdf. it says "Failed - Network error"
0
narendra
Top achievements
Rank 1
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

 

0
narendra
Top achievements
Rank 1
answered on 18 Jun 2019, 01:20 PM
It works in IE not in Chrome
0
narendra
Top achievements
Rank 1
answered on 18 Jun 2019, 02:54 PM

printing 10 rows from radgrid works fine, try printing all 70 rows or 200 rows to pdf and see. complete grid is not printed at all.

0
Rumen
Telerik team
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:

<!-- Load Pako ZLIB library to enable PDF compression -->
<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.
Tags
ClientExportManager
Asked by
narendra
Top achievements
Rank 1
Answers by
Rumen
Telerik team
narendra
Top achievements
Rank 1
Share this question
or