RadEditor table not exporting

6 posts, 1 answers
  1. Wyatt
    Wyatt avatar
    22 posts
    Member since:
    Aug 2012

    Posted 28 Jun 2013 Link to this post

    I am trying to export a table from radeditor to pdf.  I have copied exactly the code in the demo and the pdf shows blank.

            <asp:button runat="server" ID="btnExport" Text="Generate PDF" OnClick="btnExport_Click"/>

            <telerik:RadEditor ID="RadEditor1" runat="server" ContentFilters="DefaultFilters,PdfExportFilter"  Visible="false" >
     <Content>
    same code from demo
              </Content>
            </telerik:RadEditor>

            protected void btnExport_Click(object sender, EventArgs e)
            {           
    RadEditor1.ExportToPdf();
            }

    How can I get the table to export
  2. Rumen
    Admin
    Rumen avatar
    13849 posts

    Posted 01 Jul 2013 Link to this post

    Hello,

    Can you please provide the problematic HTML content so that we can examine it and find what is breaking the PDF exporter?

    Do you experience the problem with TABLE elements only?

    Best regards,
    Rumen
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  3. Wyatt
    Wyatt avatar
    22 posts
    Member since:
    Aug 2012

    Posted 01 Jul 2013 Link to this post

    hi,

    It's literally a copy paste from the demo.  I just recieve a blank page with it.

     <Content>
                   <h2 style="background-color: #689a05; color: #ffffff; text-align: center;font-size: 22px; font-family: segoe ui;">RadEditor for ASP.NET AJAX</h2>
                   <p style="text-align: justify;"><span style="font-size: 19px; color: #4f6128;"><strong>RadEditor</strong></span><span style="color: #4f6128;"> </span>is not simply an HTML<sup>1</sup> Editor. It is what Microsoft chose to use in <strong>MSDN</strong>, <strong>CodePlex</strong>, <strong>TechNet</strong>, <strong>MCMS</strong> and even as an alternative to the default editor in <a href="http://www.telerik.com/products/aspnet-ajax/sharepoint.aspx">SharePoint</a>. Whether you need a mere Textbox with Google-like spellchecker, or a Word-like content authoring environment, the result is the same: clean <strong>XHTML</strong> output, fast rendering, widest cross-browser support, and <ahref="http://www.telerik.com/products/aspnet-ajax/editor.aspx">tons of features</a>: <br />
                   <br />
                   <img style="margin-top: 25px; float: left; margin-right: 15px;" alt="product logo" src="../../Img/editor.jpg" /></p>
                   <ul style="width: 350px; float: left;">
                        <li>
                        <em>Out-of-the-box XHTML-enabled Output...</em>
                        </li>
                        <li>
                        <em>Unmatched Loading Speed and Performance</em>
                        </li>
                        <li>
                        <em>Microsoft Word-like Spell-checking</em>
                        </li>
                        <li>
                        <em>Seven Ways for Pasting from Word</em>
                        </li>
                        <li>
                        <em>Multilevel Undo/Redo with Action Trails</em>
                        </li>
                        <li>
                        <em>Extended Functionality Through Integrated Controls</em>
                        </li>
                   </ul>
                   <table width="500" style="margin: 0pt auto; width: 0px;clear:both;">
                        <colgroup><col><col><col><col></colgroup>
                        <thead>
                             <tr>
                                  <th style="background-color: #ebf1dd;">Browser/OS</th>
                                  <th style="background-color: #ebf1dd;">Windows</th>
                                  <th style="background-color: #ebf1dd;">Mac OS</th>
                                  <th style="background-color: #ebf1dd;">Linux</th>
                             </tr>
                        </thead>
                        <tbody>
                             <tr>
                                  <td align="center" style="text-align: left; vertical-align: middle;"><img style="float: left;" alt="ie"src="../../Img/BrowserIcons/ie.gif" />&nbsp; Internet Explorer</td>
                                  <td valign="top" style="background-color: #f2f2f2;">6.0+</td>
                                  <td valign="top" style="background-color: #e5e0ec;">- </td>
                                  <td valign="top" style="background-color: #dbeef3;">- </td>
                             </tr>
                             <tr>
                                  <td><img style="float: left;" alt="ff" src="../../Img/BrowserIcons/ff.gif" />&nbsp; Firefox</td>
                                  <td style="background-color: #f2f2f2;">1.5+</td>
                                  <td style="background-color: #e5e0ec;">1.5+</td>
                                  <td style="background-color: #dbeef3;">1.5+</td>
                             </tr>
                             <tr>
                                  <td><img style="float: left;" alt="chrome" src="../../Img/BrowserIcons/chrome.gif" />&nbsp; Google Chrome</td>
                                  <td style="background-color: #f2f2f2;">0.2+</td>
                                  <td style="background-color: #e5e0ec;">5.0+</td>
                                  <td style="background-color: #dbeef3;">5.0+</td>
                             </tr>
                             <tr>
                                  <td><img style="float: left;" alt="opera" src="../../Img/BrowserIcons/opera.gif" />&nbsp; Opera</td>
                                  <td style="background-color: #f2f2f2;">9.0+</td>
                                  <td style="background-color: #e5e0ec;">9.0+</td>
                                  <td style="background-color: #dbeef3;">-</td>
                             </tr>
                             <tr>
                                  <td><img style="float: left;" alt="safari" src="../../Img/BrowserIcons/safari.gif" />&nbsp; Safari</td>
                                  <td style="background-color: #f2f2f2;">3.0+</td>
                                  <td style="background-color: #e5e0ec;">3.0+</td>
                                  <td style="background-color: #dbeef3;">-</td>
                             </tr>
                        </tbody>
                   </table>
                   <br />
                   <p style="border-top: 1px solid #555;padding-top: 10px;">
                   <sup><sup><a id="HTMLDescription">1.</a></sup>The computer language used to create world-wide-web pages which are read by browsers.</sup>
                   </p>
              </Content>
  4. Ivaylo
    Admin
    Ivaylo avatar
    37 posts

    Posted 03 Jul 2013 Link to this post

    Hello Wyatt,

    Thank you for your feedback.

    We have tested the described scenario and we did reproduce the problem. The reason behind it is that the export functionality expects that all images are properly referenced at the time of the exporting. In this particular case, copying just the mark-up and not the pictures from the demo causes the undesired behavior to appear.

    Could you verify that this is the case and, if yes, I would advise you to double-check that all images are properly referenced in the mark-up, or are entirely disposed of.

    Should you have any other questions, do not hesitate to contact us.

    Regards,
    Ivaylo
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
  5. Wyatt
    Wyatt avatar
    22 posts
    Member since:
    Aug 2012

    Posted 03 Jul 2013 Link to this post

    Thank  you, that did fix the problem.  

    However when I add the content from the code behind, it displays in radeditor, but not in the export. I stripped it down to the simplest table I could.

                RadEditor1.Content =   " <table> " +
                        " <tbody> " +
                        "   <tr> " +
                        "       <td>Test</td>" +
                        "   </tr>" +
                        "</tbody>" +
                    " </table>";


    also, what would be the proper way to embed and image from the codebehind?  assuming the image is in a folder "Images/pdf/icon1.png"
  6. Answer
    Ivaylo
    Admin
    Ivaylo avatar
    37 posts

    Posted 05 Jul 2013 Link to this post

    Hello Wyatt,

    The reason why the table does not export in the generated PDF is pretty simple. A client method of the Editor exists to validate the HTML and add/remove additional tags in order to make it XHTML compliant and exportable. Since I assume that you have set the Editor's content in the Page_Load event of the page life cycle, what happens is the following:
    1. The Editor's client-side function has correctly executed and validated the XHTML content.
    2. The button click fires the Page_Load event which resets the Editor's content to the initial invalid XHTML.
    3. The Button_Click event is raised which tries to Export the content before being re-validated.
    4. Thus, the PDF Export functionality attempts to export content that does not meet its requirements.

    As you can yourself observe, by placing the same HTML in the Editor's content area and going to the HTML tab, a new style attribute is added to the table tag and a new line of HTML is generated (<colgroup><col /></colgroup>).

    You can either double-check that the content you are setting meets the requirements for exporting, or make sure that the content is not reset when calling the ExportToPdf() method, as in the following example:

    protected void Page_Load(object sender, EventArgs e)
    {
        if (!Page.IsPostBack)
        RadEditor1.Content = "<table><tbody><tr><td>Test</td></tr></tbody></table>";
    }

    As for your second question, the proper syntax is exhibited in the example below and you can verify it by placing any image into the Editor and observing the generated HTML:

    <img alt="" src="Images/pdf/icon1.png" />

    I hope that you will find the provided information helpful.

    Regards,
    Ivaylo
    Telerik
    If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the RadControls for ASP.NET AJAX, subscribe to the blog feed now.
Back to Top