ExportToPdf and Jquery UI Dialog

9 posts, 0 answers
  1. Gabriel Castillo
    Gabriel Castillo avatar
    9 posts
    Member since:
    Jul 2009

    Posted 11 Nov 2010 Link to this post

    Hi:

    I have a rad editor in a user control, the user control inside of an Update Panel on a Jquery UI Dialog, but when I call the ExportToPdf method nothing happens and the Content of the rad editor goes away. When I remove the Juery Dialog and the Update Panel the Export Facility works as expected.

    Any Sugestions?

    Thanks in advance.

    My Code is as follows:

    <div id="dvPopUp" title="PopUp" style="display:none;">
            <asp:UpdatePanel runat="server" ID="upLetter" UpdateMode="Conditional">
                <ContentTemplate>
                    <User Control with Rad Editor/>               
                </ContentTemplate>
            </asp:UpdatePanel>
    </
    div>
  2. Gabriel Castillo
    Gabriel Castillo avatar
    9 posts
    Member since:
    Jul 2009

    Posted 11 Nov 2010 Link to this post

    Just realized that making the export button do a full post back solve the issue.
    For reference: On the update panel I set a PostBackTrigger for the Export Button.

    Thanks anyway, but my issue is resolved
  3. Gabriel Castillo
    Gabriel Castillo avatar
    9 posts
    Member since:
    Jul 2009

    Posted 11 Nov 2010 Link to this post

    Now I have another issue: Rad editor is only exporting plain text not html tags like bold or colors.
    I have version: 2009.1.402.35
    It gives me an error when I set the property: ContentFilters="DefaultFilters,PdfExportFilter"

    Is it something related to the version that I am using?
  4. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 16 Nov 2010 Link to this post

    Hello Gabriel,

    Here is a list of known Export To PDF issues and suggestions on how to fix part of them:
    1) Bold and Italic formatting - RadEditor uses the execCommand method and the browser's Bold / Italiccommands to apply the bold /italic formatting.Unfortunately, the third party APOC pdf exporter tool does not recognize <b>, <strong>, <i> and <em> tags tags and can work only with inline styles.

    The problem is logged in our PITS system as public issue and due to your request I raised its priority to high. You can check its status here.

    To temporary fix the problem you could write a custom content filter that will replace the strong tag with a span tag with style="font-weight:bold" and  and <em> tags with style="font-style:italic" using regular expressions. Here is an example:
    <script type="text/javascript">
        functionOnClientLoad(editor, args) {
            editor.get_filtersManager().add(newMyFilter());
        }
        MyFilter = function() {
            MyFilter.initializeBase(this);
            this.set_isDom(false);
            this.set_enabled(true);
            this.set_name("RadEditor filter");
            this.set_description("RadEditor filter description");
        }
        MyFilter.prototype =
    {
        getHtmlContent: function(content) {
            content = content.replace("<strong>", "<span style=\"font-weight:bold;\">", "gi").replace(/\<\/strong\>/gi, "</span>"); //replace <strong> with <span>
            content = content.replace("<b>", "<span style=\"font-weight:bold;\">", "gi").replace(/\<\/b\>/gi, "</span>"); //replace <strong> with <span>
            returncontent;
        }
    }
        MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
    </script>

    2) Background color - The third-party export to PDF tool named Fo.NET library has limitations and one of them is that the background color of the inline elements (SPAN, FONT, etc) is not supported. The tool could export background color for block elements such as:

    <div style="background-color: #ffff00;">Hello World</div>
    <p style="background-color: #00ff00;">Hello World</p>


    3) New Lines - The Export to PDF functionality of RadEditor can render only paragraph <p> tags, but not <br/> tags in exported PDF document. That is why my recommendation is to set the RadEditor's NewLineBr property to false. Therefore the editor will insert a <p> tag when the Enter key is pressed and you should not experience this problem.

    4) External styles and class attribute - The third party HTMLtoPDF converter does not support external css files and it does not render the classes specified in the class attributes of the HTML elements. It is possible to export formatting applied by inline style attributes.

    5) Fonts - To export fonts you should follow this rule - the first letter of the font name should start with uppercase letter. This feature is also logged for implementation in our PITS system.



    Regards,
    Rumen
    the Telerik team
    Browse the vast support resources we have to jumpstart your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.
  5. Junbin
    Junbin avatar
    9 posts
    Member since:
    Jun 2010

    Posted 07 Apr 2011 Link to this post

    Hi Rumen,

    Thanks for the excellent explaination.

    I ran into another format issue when I use ExportToPDF funtion (error format). The text is very simple:

    <ul>
        <ul>
            <li>testing....</li>
        </ul>
    </ul>

    The test result shows if a <ul> is right after another <ul> then it will cause an export problem. Any suggestions to fix this issue?

    Thanks a lot.
    Junbin
  6. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 12 Apr 2011 Link to this post

    Hello Junbin,

    I believe that you produce this invalid XHTML content using the Indent button of RadEditor. This button uses the browser's execCommand indent feature which produces nested UL tags. My recommendation is to overwrite the Indent command in order to prevent the reported Export To PDF problem. Here is an example on how to do that:
    <script type="text/javascript">
        function OnClientCommandExecuting(editor, args) {
            var commandName = args.get_commandName();
            var editorParentSelection = editor.getSelection().getParentElement();
     
            switch (commandName) {
     
                case "Indent":
                    var selectedElement = editor.getSelectedElement();
     
                    while (!Telerik.Web.UI.Editor.Utils.isEditorContentArea(selectedElement) && !(selectedElement.tagName.toLowerCase() == "ul")) {
                        selectedElement = selectedElement.parentNode;
                    }
     
                    selectedElement.style.marginLeft = selectedElement.style.marginLeft ? (parseInt(selectedElement.style.marginLeft) + 20) + "px" : "20px";
     
     
                    args.set_cancel(true);
     
     
                    break;
     
                case "Outdent":
                    //implement here the reverse code that will extract 20px from the indented UL element.
                    break;
     
                default:
                    break;
            }
     
        }
     
    </script>
    <Telerik:RadEditor ID="RadEditor1" runat="server" OnClientCommandExecuting="OnClientCommandExecuting">
        <Content>
    <ul>
        <li>testing....</li>
    </ul>
        </Content>
    </Telerik:RadEditor>


    Kind regards,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  7. Junbin
    Junbin avatar
    9 posts
    Member since:
    Jun 2010

    Posted 12 Apr 2011 Link to this post

    Hi Rumen,

    Thank you for the suggestion and nice code sample. It will definitely fix some issues. However, the editor I am using also gets content through other means such as copy and paste (programmatically). Actually, the problem content came from copying. I am planning to write a regular expression to insert an pair <li></li> between two <ul> elements before export, but I believe it is worst solution. Any other suggestions?

    Best regards,
    Junbin
  8. Rumen
    Admin
    Rumen avatar
    13804 posts

    Posted 15 Apr 2011 Link to this post

    Hi Junbin,

    The solution that you plan to implement is the only possible one. You should write a regular expression and execute it either in a custom content filter on the client or when obtaining the content via the Content property on the server.

    All the best,
    Rumen
    the Telerik team

    Browse the vast support resources we have to jump start your development with RadControls for ASP.NET AJAX. See how to integrate our AJAX controls seamlessly in SharePoint 2007/2010 visiting our common SharePoint portal.

  9. Junbin
    Junbin avatar
    9 posts
    Member since:
    Jun 2010

    Posted 15 Apr 2011 Link to this post

    Hi Rumen,

    I have solved the issue by using regular expression. Thank you for your great support.

    Junbin
     
Back to Top