Rendering a RadEditor in an IFrame in RadGrid column

1 Answer 68 Views
Editor Grid
Mark
Top achievements
Rank 1
Iron
Mark asked on 16 Aug 2024, 04:15 PM

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

Sort by
0
Rumen
Telerik team
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

Tags
Editor Grid
Asked by
Mark
Top achievements
Rank 1
Iron
Answers by
Rumen
Telerik team
Share this question
or