[Solved] Invalid XHTML generated by "InsertTable" tool button

[Joseph Alfano]

Hi,

I am using RadControls for ASP.NET AJAX Q2 2009 (2009.2.826.35).  We would like to have the output be valid XHTML 1.0 Transitional when the Design tab is used.  When using the "InsertTable" tool button, there are two ways I can generate invalid XHTML, and I was wondering if there is any way to prevent this invalid XHTML from being generated.  The two ways I can generate invalid XHTML are:

1) When you insert a new table using the "Table wizard" feature, and accept the default settings, you get the following HTML inserted into the editor:

<table>
    <thead>
    </thead>
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>

If you then validate this markup against any of the XHTML standards, it fails validation, due to the presence of the empty <thead></thead> element.  Is there some way to suppress this <thead> element if it is not being populated with content?

2) If you enter some content and then hit enter to move to a new line, a new <p></p> element is inserted.  If you then insert a table by just directly selecting the table size from the grid in the pop-up that appears when the "Insert Table" button is clicked (i.e. without using the table wizard), the following markup is generated:

<p>
<table>
    <tbody>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
        <tr>
            <td> </td>
            <td> </td>
        </tr>
    </tbody>
</table>
</p>

This markup fails XHTML validation because apparently a <table> element cannot be contained within a <p> tag.  (i.e., if I manually change the containing <p> tag to a <div>, the fragment is XHTML valid).  Is there any way in the Design interface to prevent a <table> tag from being inserted into a <p> tag?  Our users will likely follow the steps I detailed above and thus insert a <table> element into a <p> tag, and we would like to prevent this if possible.

Thank you very much for your assistance.

Joe Alfano

[Rumen]

Hi Joseph,

Thank you for your feedback.

I have good news that the first problem is internally fixed and will not exist in the official Q1 2010 build of RadControls for ASP.NET AJAX.

At the moment I can suggest you few workarounds:

1) Create custom content filter to strip this tag. Example of how to create custom content filter is available in the following article : Content Filters

<telerik:radeditor runat="server" ID="RadEditor1" OnClientLoad="OnClientLoad">
</telerik:radeditor>
<script type="text/javascript">
    function OnClientLoad(editor, args) {
        editor.get_filtersManager().add(new MyFilter());
    }
    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) {
        var newContent = content;
        //Make changes to the content and return it
        newContent = newContent.replace(/\s*<thead>\s*<\/thead>/gi, "");
        return newContent;
    },
    getDesignContent: function(content) {
        var newContent = content;
        //Make changes to the content and return it
        newContent = newContent.replace(/\s*<thead>\s*<\/thead>/gi, "");
        return newContent;
    }
}
    MyFilter.registerClass('MyFilter', Telerik.Web.UI.Editor.Filter);
</script>

2) Strip empty <thead> tag during the OnClientSubmit event

<script type="text/javascript">
     function OnClientSubmit(editor) {
         var content = editor.get_html(true);
         content = content.replace(/\s*<thead>\s*<\/thead>/gi, "");
         editor.set_html(content);
         alert(content);
     }
</script>
<telerik:RadEditor Id="RadEditor1" Runat="server" OnClientSubmit="OnClientSubmit">
</telerik:RadEditor>
<asp:Button ID="Button1" runat="server" Text="Submit" />

The second problem could be fixed again by implementing a custom content filter. You should check whether the parent of the table is a paragraph element and replace it with another valid tag.


Greetings,
Rumen
the Telerik team

Instantly find answers to your questions on the new Telerik Support Portal.
Watch a video on how to optimize your support resource searches and check out more tips on the blogs.