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

PageBreakSelector cause page to not export

7 Answers 85 Views
ClientExportManager
This is a migrated thread and some comments may be shown as answers.
Joel
Top achievements
Rank 2
Joel asked on 22 Sep 2016, 07:47 PM

I am on 2015.2.826 at the moment.

 

I have a radhtmlchart, and 4 radgrids on a page.  I want to export the chart and grid 1 on page 1, and other 2 on page two.  Page is exporting successfully at this point.

Without changing anything else, if I add PageBreakSelector=".test" to clientexportmanager the export no longer works.

Do I need a style actually defined for this in a certain way?  I went through the demos and didn't see them defined. 

I did try this with and without cssclass="test" on my page 2 grid.

<telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
    <PdfSettings PaperSize="Letter" PageBreakSelector=".test" FileName="CODALite.pdf"  Landscape="false"/>
</telerik:RadClientExportManager>
 
 
<script>
   var $ = $telerik.$;
                                       
                                           mobileAndTabletcheck = function () {
                                                    var check = false;
                                                    (function (a) { if (/(android|bb\d+|meego).+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|mobile.+firefox|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|series(4|6)0|symbian|treo|up\.(browser|link)|vodafone|wap|windows ce|xda|xiino|android|ipad|playbook|silk/i.test(a) || /1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i.test(a.substr(0, 4))) check = true; })(navigator.userAgent || navigator.vendor || window.opera);
                                                    return check;
                                                };
                                           
function exportReport() {
   var cem = $find("<%=RadClientExportManager1.ClientID%>");
   $telerik.$("#btnGraphHelp").hide();
    $telerik.$("#exphead").hide();
      if (mobileAndTabletcheck() == false)
          {
          $telerik.$("#divHeadBig").hide();
          $telerik.$("#divHeadSmall").show();
           }
      cem.exportPDF($telerik.$("html"));
     
   setTimeout(function () {
          $telerik.$("#btnGraphHelp").show();
          $telerik.$("#exphead").show();
         if (mobileAndTabletcheck() == false) {
          $telerik.$("#divHeadBig").show();
                                                        $telerik.$("#divHeadSmall").hide();
                                                    }
                                                     
                                                }, 1000);
                                            }
 
 
 
                                        </script>

 

Thanks

7 Answers, 1 is accepted

Sort by
0
Joel
Top achievements
Rank 2
answered on 22 Sep 2016, 07:57 PM

I don't know if it makes a difference, but my grids and the chart are inside of tables.

For isolation purposes, I have put the page 2 grids in a separate table and applied the "test" cssclass to the table instead of the grid with no change in behavior.

 

0
Joel
Top achievements
Rank 2
answered on 23 Sep 2016, 01:54 PM

So you can see what I am seeing, the link below will download a sample project.  It is the default VS2015 project with Telerik added, bootstrap.css modified, and default.aspx showing what I am talking about. 

As it exists, it exports a PDF when the green button is pressed.  If you swap the commented line in radclientexportmanager, it does not export.  Only difference is the addition of PageBreakSelector=".test"

 <%--<PdfSettings PaperSize="Letter" PageBreakSelector=".test" FileName="CODALite.pdf"  Landscape="false"/>--%>
<PdfSettings PaperSize="Letter" FileName="CODALite.pdf"  Landscape="false"/>

 

Project link.

... removed ...

0
Joel
Top achievements
Rank 2
answered on 23 Sep 2016, 02:11 PM
After posting this, I upgraded to the newest release, and the same issue remains.
0
Accepted
Ivan Danchev
Telerik team
answered on 23 Sep 2016, 08:18 PM
Hello Joel,

Let me first mention that I removed the link to the sample project you provided since it contained the licensed version of the Telerik assemblies (UI and Skins). While there is no problem with attaching Trial dlls to forum posts, attaching and any other form of distribution of the licensed assemblies is strictly forbidden and could lead to legal actions against the offender. Please have this in mind in the future and either refrain from attaching or linking the assemblies and just specify the version you are using or attach/link their Trial version.

Having said that, I ran the project you had linked and noticed that a js exception was thrown after uncommenting the line that sets the PageBreakSelector. After changing the element that is passed to the export function from "html" to "body":
cem.exportPDF($telerik.$("body"));
no exception was thrown and the page exported correctly so you could give this a try.


Regards,
Ivan Danchev
Telerik by Progress
Do you need help with upgrading your ASP.NET AJAX, WPF or WinForms projects? Check the Telerik API Analyzer and share your thoughts.
0
Joel
Top achievements
Rank 2
answered on 23 Sep 2016, 08:54 PM

Thank you for the response Ivan.  I appreciate it.  I have verified that changing the export type to body will now result in an export.

I have also removed the zip file from that site.

Thank you for taking the time to respond.

0
Jorge
Top achievements
Rank 1
answered on 02 Aug 2017, 04:00 PM

Hi could please help me, I'm using RadClientExportManage, to be able export a chart with a table of html but when I added the PageBreakSelector the report doesn't show the chart and the html table only shows the first <td> of the <tr> this is my code

    <script>

        function exportAllPanelItems() {
            var cem = $find("<%=RadClientExportManager1.ClientID%>");
            cem.exportPDF($telerik.$(".panel-container"));
        }
    </script>

 

 <telerik:RadClientExportManager runat="server" ID="RadClientExportManager1">
       <PdfSettings PaperSize="A4" MarginRight="10mm" MarginLeft="10mm" />
    </telerik:RadClientExportManager>


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

    <div class="panel-container">
        <div runat="server" id="panelPrinicpal">
            <table style='padding: 0px; width: 100%; cellpadding: 0; cellspacing: 0; font-weight: normal;'>
                <tr>
                    <td valign='top' width='49%'>1000 Sawgrass Corporate Pkwy, Suite 120</td>
                    <td valign='top' width='2%'></td>
                    <td align='right' valign='top' width='49%'>123</td>
                </tr>
            </table>
            <table style='padding: 0px; width: 100%; cellpadding: 0; cellspacing: 0; font-weight: normal;'>
                <tr>
                    <td valign='top' width='49%'>Sunrise, FL 33323</td>
                    <td valign='top' width='2%'></td>
                    <td align='right' valign='top' width='49%'>Sunrise, FL 33323</td>
                </tr>
            </table>
        </div>

        <div id="Div1" class="pageBreak">

            <telerik:RadHtmlChart runat="server" ID="RadHtmlChart1" Width="400" Height="400" Transitions="true"
                Skin="Metro">
                <Appearance>
                    <FillStyle BackgroundColor="Transparent"></FillStyle>
                </Appearance>
                <ChartTitle Text="Server CPU Load By Days">
                    <Appearance Align="Center" BackgroundColor="Transparent" Position="Top">
                    </Appearance>
                </ChartTitle>
                <Legend>
                    <Appearance BackgroundColor="Transparent" Position="Bottom">
                    </Appearance>
                </Legend>
                <PlotArea>
                    <Appearance>
                        <FillStyle BackgroundColor="Transparent"></FillStyle>
                    </Appearance>
                    <XAxis AxisCrossingValue="0" Color="black" MajorTickType="Outside" MinorTickType="Outside"
                        Reversed="false">
                        <Items>
                            <telerik:AxisItem LabelText="Monday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Tuesday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Wednesday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Thursday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Friday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Saturday"></telerik:AxisItem>
                            <telerik:AxisItem LabelText="Sunday"></telerik:AxisItem>
                        </Items>
                        <LabelsAppearance DataFormatString="{0}" RotationAngle="0" Skip="0" Step="1">
                        </LabelsAppearance>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="Days">
                        </TitleAppearance>
                    </XAxis>
                    <YAxis AxisCrossingValue="0" Color="black" MajorTickSize="1" MajorTickType="Outside"
                        MaxValue="100" MinorTickSize="1" MinorTickType="Outside" MinValue="0" Reversed="false"
                        Step="25">
                        <LabelsAppearance DataFormatString="{0}%" RotationAngle="0" Skip="0" Step="1">
                        </LabelsAppearance>
                        <TitleAppearance Position="Center" RotationAngle="0" Text="CPU Load">
                        </TitleAppearance>
                    </YAxis>
                    <Series>
                        <telerik:LineSeries Name="Week 1">
                            <Appearance>
                                <FillStyle BackgroundColor="#5ab7de"></FillStyle>
                            </Appearance>
                            <LabelsAppearance DataFormatString="{0}%" Position="Above">
                            </LabelsAppearance>
                            <LineAppearance Width="1" />
                            <MarkersAppearance MarkersType="Circle" BackgroundColor="White" Size="8" BorderColor="#5ab7de"
                                BorderWidth="2"></MarkersAppearance>
                            <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="35"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="52"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="18"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="39"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="10"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="6"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                        <telerik:LineSeries Name="Week 2">
                            <Appearance>
                                <FillStyle BackgroundColor="#2d6b99"></FillStyle>
                            </Appearance>
                            <LabelsAppearance DataFormatString="{0}%" Position="Above">
                            </LabelsAppearance>
                            <LineAppearance Width="1" />
                            <MarkersAppearance MarkersType="Square" BackgroundColor="#2d6b99" Size="8" BorderColor="#2d6b99"
                                BorderWidth="2"></MarkersAppearance>
                            <TooltipsAppearance DataFormatString="{0}%"></TooltipsAppearance>
                            <SeriesItems>
                                <telerik:CategorySeriesItem Y="15"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="50"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="20"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="93"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="43"></telerik:CategorySeriesItem>
                                <telerik:CategorySeriesItem Y="23"></telerik:CategorySeriesItem>
                            </SeriesItems>
                        </telerik:LineSeries>
                    </Series>
                </PlotArea>
            </telerik:RadHtmlChart>

        </div>
        <div runat="server" id="Div2">
            <telerik:RadPanelBar RenderMode="Lightweight" ID="RadPanelBar1" Skin="Web20" runat="server" Width="300">
                <Items>
                    <telerik:RadPanelItem ImageUrl="images/Honda.png" CssClass="pageBreak" runat="server" Height="60" Expanded="True">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="Accord" />
                            <telerik:RadPanelItem runat="server" Text="Civic" />
                            <telerik:RadPanelItem runat="server" Text="Civic" />
                            <telerik:RadPanelItem runat="server" Text="CR-V" />
                            <telerik:RadPanelItem runat="server" Text="HR-V" />
                            <telerik:RadPanelItem runat="server" Text="Integra" />
                            <telerik:RadPanelItem runat="server" Text="Jazz" />
                            <telerik:RadPanelItem runat="server" Text="Legend" />
                            <telerik:RadPanelItem runat="server" Text="Prelude" />
                        </Items>
                    </telerik:RadPanelItem>
                    <telerik:RadPanelItem ImageUrl="images/Nissan.png" CssClass="pageBreak" runat="server">
                        <Items>
                            <telerik:RadPanelItem runat="server" Text="350Z" />
                            <telerik:RadPanelItem runat="server" Text="370Z" />
                            <telerik:RadPanelItem runat="server" Text="GT-R" />
                            <telerik:RadPanelItem runat="server" Text="Juke" />
                            <telerik:RadPanelItem runat="server" Text="Pulsar" />
                            <telerik:RadPanelItem runat="server" Text="QashQai" />
                            <telerik:RadPanelItem runat="server" Text="X-Trail" />
                        </Items>
                    </telerik:RadPanelItem>
                </Items>
            </telerik:RadPanelBar>
        </div>
    </div>

0
Ivan Danchev
Telerik team
answered on 07 Aug 2017, 08:53 AM
Hello Jorge,

I replied in the other thread you started here.

Regards,
Ivan Danchev
Progress Telerik
Try our brand new, jQuery-free Angular 2 components built from ground-up which deliver the business app essential building blocks - a grid component, data visualization (charts) and form elements.
Tags
ClientExportManager
Asked by
Joel
Top achievements
Rank 2
Answers by
Joel
Top achievements
Rank 2
Ivan Danchev
Telerik team
Jorge
Top achievements
Rank 1
Share this question
or