Rendering a RadEditor in an IFrame in RadGrid column

1 Answer 72 Views

Editor Grid

Mark asked on 16 Aug 2024, 04:15 PM

untitled3.png

Untitled4.png

So i have the following ItemTemplate defined for a RadGrid

<telerik:GridTemplateColumn DataField="Description" HeaderText="Description">
	<ItemTemplate>
		<iframe>
			<telerik:RadEditor ID="ContentEditor1" onClientLoad="OnClientLoad" CssClass="Modal-Scroll2" Enabled="false" ToolsFile="~/ToolsFileEmpty.xml" runat="server" EditModes="Preview" NewLineMode="br" ContentFilters="DefaultFilters" Width="100%" >
				<CssFiles>
					<telerik:EditorCssFile Value="~/css/EditorStyles.css" />
				</CssFiles>
			</telerik:RadEditor>
		</iframe>
	</ItemTemplate>
</telerik:GridTemplateColumn>

However, when this renders on the page, the editor content appears in the wrong place:

and the end result is a bunch of empty iframes:

Ideas?

-Mark

1 Answer, 1 is accepted

answered on 20 Aug 2024, 02:35 PM

Hi Mark,

Thank you for sharing this interesting scenario with the community!

Since the Enabled property of RadEditor is set to false, its content area is rendered as a standard div element for performance reasons. The behavior you're observing is because HTML does not allow non-inline elements like <div> to be placed directly inside an <iframe> tag.

You can replicate the same behavior with the following HTML content:

<iframe>
  <div>some content</div>
</iframe>

and the result would be:

An <iframe> element expects its content to be a complete HTML document, which typically includes <html>, <head>, and <body> tags. When you directly place a <div> inside an <iframe>, without an enclosing document structure, the browser treats the content incorrectly.

What you can do instead of placing the editor in an iframe is to remove the iframe and disable the editor programmatically via its client-side API:

<telerik:RadEditor runat="server" ID="RadEditor1">
    <Content>some test content</Content>
</telerik:RadEditor>
<input type="button" onclick="toggleEditing();return false;" value="Toggle editing" />
<script type="text/javascript">
    var toggle = true;
    function toggleEditing() {
        var editor = $find("<%=RadEditor1.ClientID%>");
        toggle = !toggle;
        editor.enableEditing(toggle);
        editor.set_editable(toggle);
        if (toggle == false) editor.get_document().body.style.backgroundColor = "gray";
        else editor.get_document().body.style.backgroundColor = "";
    }
</script>

Regards,

Rumen
Progress Telerik