RadEditor is setting table width to 0 when saving to SQL column

[Sumith Jayasuriya]

Hi Telerik Team,

I have a application where users select templates and do some custom editing on the templates that we then print and ship.

Basically we come to the editing page and pull the templates HTML layout into the RadEditor which is set to design mode.  After the user is done entering some text in they then save the order, on the back end we are simply saving the Radeditor.content with a update statement like:

Update ordertable SET HTMLContent = '" & RadEditor1.Content.Replace("'", "''") & "'"

The save is happening, but it seems that RadEditor is not saving the table width property correctly.  When we pull up the template HTML from our table that holds all our templates we have a table tag with a style="width:300px" but after editing some text in this table and doing our update statement I can see that table tag comes with style="width:0".  Users aren't able to edit any of the underlying HTML only text within the table.  The problem is seen when users are proofing their layout, we are pulling up the HTML that was saved after their edits in a popup for them to approve, but since the table width property is 0 the layout looks awkward and they are not willing to approve it.

I'm fairly new to using the radeditor, so any help in the right direction is appreciated.  Please let me know if any further detail is required.

[Rumen]

Hello,

Could you please tell which ContentFilters are enabled? If the PdfExportFilter filter is enabled, disable it and test again.

Are you also able to reproduce the problem in the Save In Database or any of the other live demos of RadEditor?

Best regards,
Rumen
the Telerik team

[Sumith Jayasuriya]

Thanks so much, it wasn't the pdfexportfilter but I had the converttoxhtml filter enabled.

I have another question now regarding export to pdf.  I know the third party tool you guys used does not support CSS, but my scenario so far looks like I need to use CSS but you guys might have a work around.  The templates we use for our application use a high resolution image which we use as the background on a container, in our case a table.  We use the high resolution image so that we can print all sizes with high quality images.

My question is, and I might be naive on this, but I don't think we can apply a inline style to give the whole table a specified background image, and I think its the same for a div or span?

Basically the markup on the template looks like:

<style type="text/css">
    #background
        {
            background-image: url(../image/test.jpg);
        }
</style>
<table id="background"></table>

What we would like to achieve is for the user to have the ability to export their edited template as a pdf for approval.  Sadly most of the end users are older browser versions that aren't CSS3 compliant so our preview popup that pulls the html looks awkward on their screens so we would like the ability to attach a pdf to their order summary email.

Please let me know if this can be done, and if you need any other specifics.  Thanks so much for your help! 

[Rumen]

Hi,

The PDF exporter supports only inline styles, but not CSS classes.

If you set the background-image style inline it will be exported to the PDF file:

<br />
<table height="169" style="background-image: url(/aspnet-ajax/Editor/Img/UserDir/Marketing/276x250-asp.net-featured.gif); width: 201px;">
    <colgroup><col /><col /><col /></colgroup>
    <tbody>
        <tr>
            <td> das</td>
            <td> das</td>
            <td> das</td>
        </tr>
        <tr>
            <td> das</td>
            <td> das</td>
            <td> das</td>
        </tr>
        <tr>
            <td> das</td>
            <td> das</td>
            <td> das</td>
        </tr>
    </tbody>
</table>

 

Regards,
Rumen
the Telerik team

[Sumith Jayasuriya]

I understand that this is possible, but could we use background-size property as an inline style?  Basically we have a high resolution image as the background at 2550px x 3300px, but we would need to size this to display correctly in a table that has dimensions of 750px x 971px.  I've gotten the pdf to export but the background image is rendering at its full size so the pdf background is 1 portion of the full background image.  Here is an example of the css we are using in the template.

<style type="text/css">
    #background
        {
            background-image: url(../image/test.jpg);
            background-size: 750px 971px;
            background-position:0px 0px;
        }
</style>
<table id="background"></table>

I might be a bit confused but I've always been under the impression that when trying to size a background image to an element that CSS3 was the only way to go.  I mention CSS3 because I've read that only CSS3 can resize a background image to fit in the first place since we have had many issues with older browsers that weren't CSS3 compliant.

Thanks for any help.

[Rumen]

Hi,

I am afraid that the Export to PDF convertor does not support CSS3 and the background-size property will not work.

Regards,
Rumen
the Telerik team