PageBreakSelector cause page to not export

8 posts, 1 answers
  1. Joel
    Joel avatar
    172 posts
    Member since:
    Oct 2006

    Posted 22 Sep 2016 Link to this post

    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
  2. Joel
    Joel avatar
    172 posts
    Member since:
    Oct 2006

    Posted 22 Sep 2016 in reply to Joel Link to this post

    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.

     

  3. Joel
    Joel avatar
    172 posts
    Member since:
    Oct 2006

    Posted 23 Sep 2016 in reply to Joel Link to this post

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

  4. Joel
    Joel avatar
    172 posts
    Member since:
    Oct 2006

    Posted 23 Sep 2016 in reply to Joel Link to this post

    After posting this, I upgraded to the newest release, and the same issue remains.
  5. Answer
    Ivan Danchev
    Admin
    Ivan Danchev avatar
    1253 posts

    Posted 23 Sep 2016 Link to this post

    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.
  6. Joel
    Joel avatar
    172 posts
    Member since:
    Oct 2006

    Posted 23 Sep 2016 in reply to Ivan Danchev Link to this post

    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.

  7. Jorge
    Jorge avatar
    2 posts
    Member since:
    Feb 2012

    Posted 02 Aug Link to this post

    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>

  8. Ivan Danchev
    Admin
    Ivan Danchev avatar
    1253 posts

    Posted 07 Aug Link to this post

    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.
Back to Top