ExportToPdf and Jquery UI Dialog

[Gabriel Castillo]

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>

[Gabriel Castillo]

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

[Gabriel Castillo]

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?

[Rumen]

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

[Junbin]

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

[Rumen]

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

[Junbin]

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

[Rumen]

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

[Junbin]

Hi Rumen,

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

Junbin