This is a migrated thread and some comments may be shown as answers.

RadEditor memory leak in IE8

6 Answers 65 Views

Editor

This is a migrated thread and some comments may be shown as answers.

Scott asked on 30 Jan 2014, 03:54 PM

Hi,

One of our ASP.NET WebForms application pages is using 4 RadEditors and we have noticed major browser memory leaks running in IE8 (using sIEve to detect the memory leaks). All the RadEditors have a toolbar and spellcheck support. I have tried removing the toolbar and spellcheck code to see if that makes a difference, but the leaks appear to be with the RadEditor itself. I can get the leaks to stop by setting Enabled = false for all the RadEditors. Also note in my results that leaks occur when page is loaded - I'm not doing a spell check or clicking toolbars - only posting back the page as I click on the different tabs. The RadEditors are contained in various user controls that represent the tab contents.

I created a sample app that I attached in order to isolate the problem as much as possible. You can see below that the sample app with one RadEditor leaks memory (although at a lower rate).

It is likely that upgrading to a newer browser would correct the leaks, but unfortunately, we're mandated by corporate IT to use IE8 and have no choice for upgrading the browser (Chrome and Firefox are not an option either).

Both the main app and sample app are built in VS2012 .NET 4.0 using Telerik RadControls for Ajax Q3 2013 v 2013.3.1114.40.

Thanks in advance for any assistance you can provide.

sIEve results of main app (leaks detected when moving between tabs):

Main app code (only snippets, since I can't post entire app):

Typical RadEditor tags:

<telerik:RadEditor ID="uxContactNotesTextBox" runat="server" style="width:100%;height:100%;" ToolsWidth="144px" EditModes="Design" ToolbarMode="Default" OnClientLoad="OnContactNotesEditorLoad" BorderStyle="Solid" BorderWidth="1px">
<Tools>
<telerik:EditorToolGroup>
<telerik:EditorTool Name="Save" />
<telerik:EditorSeparator />
<telerik:EditorTool Name="Cut" />
<telerik:EditorTool Name="Copy" />
<telerik:EditorTool Name="Paste" />
<telerik:EditorTool Name="AjaxSpellCheck" />
</telerik:EditorToolGroup>
</Tools>
</telerik:RadEditor>
<telerik:RadSpell ID="uxContactNoteSpellCheck" runat="server" ControlToCheck="uxContactNotesTextBox" ButtonType="PushButton" Style="display: none;" />

function OnContactNotesEditorLoad(editor, args) {
// set defaults for editor style
var style = editor.get_contentArea().style;
style.fontFamily = 'Segoe UI';
style.fontSize = '16px';
style.color = "black";

// detect when spell check is running
editor.add_spellCheckLoaded(function () {
var spell = editor.get_ajaxSpellCheck();

spell.add_spellCheckStart(function (editor, args) {
isContactNotesSpellChecking = true;
});

spell.add_spellCheckEnd(function (editor, args) {
isContactNotesSpellChecking = false;
});
});
}

sIEve results of sample app (auto-refresh enabled):

Sample app default.aspx:

default.aspx:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="WebApplication1._Default" validateRequest="false"%>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title>RadEditor Leak</title>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager runat="server">
<Scripts>
</Scripts>
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" UpdatePanelsRenderMode="Inline"/>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" />
<telerik:RadEditor ID="uxRadEditor" runat="server">
</telerik:RadEditor>
</form>
</body>
</html>

-ScottP

6 Answers, 1 is accepted

answered on 30 Jan 2014, 03:58 PM

radeditorleakie8-sieveresults-mainapp.png

radeditorleakie8-sieveresults-sampleapp.png

Sorry, I put images inline which got stripped. Attached are sIEve screenshots.

answered on 04 Feb 2014, 01:31 PM

Hi Scott,

I have tested both 2013 Q3 SP1 and the latest version 2013 Q3 SP2 using single RadEditor on the page and the page bellow which I think is closer to the scenario in your application. For both cases, there are memory leaks only in the 2013 Q3 SP1 version. Could you download the latest version of Telerik UI for ASP.NET AJAX which is 2013 Q3 SP2 and test with it?

If the leaks still occur in latest version, could you provide a sample runnable project and the exact steps for reproducing them?

<form id="form1" runat="server">

<telerik:RadScriptManager ID="RadScriptManager1" runat="server" />

<telerik:RadMultiPage ID="multiPage" runat="server" SelectedIndex="0">

<telerik:RadPageView ID="page1" runat="server">

<telerik:RadTabStrip ID="tabSecondLevel1" MultiPageID="RadMultiPage1" SelectedIndex="0" runat="server">

<Tabs>

<telerik:RadTab id="tab21" runat="server" Text="Tab 1"></telerik:RadTab>

<telerik:RadTab id="tab22" runat="server" Text="Tab 2"></telerik:RadTab>

</Tabs>

</telerik:RadTabStrip>

<telerik:RadMultiPage ID="RadMultiPage1" SelectedIndex="0" runat="server">

<telerik:RadPageView ID="RadPageView1" runat="server">

<telerik:RadEditor ID="RadEditor1" runat="server" EditModes="Design" OnClientLoad="OnContactNotesEditorLoad" ToolbarMode="Default">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Save" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="AjaxSpellCheck" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor2" runat="server" EditModes="Design" OnClientLoad="OnContactNotesEditorLoad" ToolbarMode="Default">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Save" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="AjaxSpellCheck" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</telerik:RadPageView>

<telerik:RadPageView ID="RadPageView2" runat="server">

<telerik:RadEditor ID="RadEditor3" runat="server" EditModes="Design" OnClientLoad="OnContactNotesEditorLoad" ToolbarMode="Default">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Save" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="AjaxSpellCheck" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

<telerik:RadEditor ID="RadEditor4" runat="server" EditModes="Design" OnClientLoad="OnContactNotesEditorLoad" ToolbarMode="Default">

<Tools>

<telerik:EditorToolGroup>

<telerik:EditorTool Name="Save" />

<telerik:EditorSeparator />

<telerik:EditorTool Name="Cut" />

<telerik:EditorTool Name="Copy" />

<telerik:EditorTool Name="Paste" />

<telerik:EditorTool Name="AjaxSpellCheck" />

</telerik:EditorToolGroup>

</Tools>

</telerik:RadEditor>

</telerik:RadPageView>

</telerik:RadMultiPage>

</telerik:RadPageView>

</telerik:RadMultiPage>

<script type="text/javascript">

function OnContactNotesEditorLoad(editor, args) {

var style = editor.get_contentArea().style;

style.fontFamily = 'Segoe UI';

style.fontSize = '16px';

style.color = "black";

editor.add_spellCheckLoaded(function() {

var spell = editor.get_ajaxSpellCheck();

spell.add_spellCheckStart(function(editor, args) {

isContactNotesSpellChecking = true;

});

spell.add_spellCheckEnd(function(editor, args) {

isContactNotesSpellChecking = false;

});

}

</script>

</form>

Regards,
Nikolay
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

answered on 07 Feb 2014, 02:34 PM

radeditorleakie8-sieveresults-telerik-2013-3-1324-40-tabs.png

Hi Nikolay,

Thank you for looking into this issue.

I downloaded the latest version of Telerik - 2013.3.1324.40 and tested my sample app using sIEve.

I was able to reproduce your results that reloading a page with a single RadEditor does not leak memory. This is great news!

As another test, I created a page that is similar to our production application. It is an aspx page with a single user control. On the user control there are several RadTabs and RadMultiPageViews. Each RadMultiPageView contains a single RadEditor.

UserControl.ascx:
<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="UserControl.ascx.cs" Inherits="WebApplication1.UserControl" %>
<telerik:RadTabStrip ID="uxRadTabStripContact" class="clsSubTabStrip" runat="server" Skin="Glow" MultiPageID="RadMultiPageContact" Width="100%" SelectedIndex="0" AutoPostBack="true">
<Tabs>
<telerik:RadTab Value="Details" Text="Details" PageViewID="RadPageViewContactDetails" runat="server" Selected="True" />
<telerik:RadTab Value="RelatedInteractions" Text="Related Interactions" PageViewID="RadPageViewContactRelatedInteractions" runat="server" />
<telerik:RadTab Value="Notes" Text="Notes" PageViewID="RadPageViewContactNotes" runat="server" />
<telerik:RadTab Value="MoreInfo" Text="More Info" PageViewID="RadPageViewContactMoreInfo" runat="server" />
<telerik:RadTab Value="Uploads" Text="Attachments" PageViewID="RadPageViewContactUploads" runat="server" />
</Tabs>
</telerik:RadTabStrip>
<div class="exampleWrapper" style="width:100%;overflow:auto;padding-bottom:100px;">
<telerik:RadMultiPage ID="RadMultiPageContact" CssClass="multipage qsf-ib" runat="server" SelectedIndex="0" Width="100%">
<telerik:RadPageView ID="RadPageViewContactDetails" runat="server" Width="100%">
<telerik:RadEditor ID="RadEditor4" runat="server">
</telerik:RadEditor>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageViewContactRelatedInteractions" runat="server" Width="100%">
<telerik:RadEditor ID="RadEditor3" runat="server">
</telerik:RadEditor>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageViewContactUploads" runat="server" Width="100%">
<telerik:RadEditor ID="RadEditor2" runat="server">
</telerik:RadEditor>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageViewContactMoreInfo" runat="server" Width="100%">
<telerik:RadEditor ID="RadEditor1" runat="server">
</telerik:RadEditor>
</telerik:RadPageView>
<telerik:RadPageView ID="RadPageViewContactNotes" runat="server" Width="100%">
<telerik:RadEditor ID="uxRadEditor" runat="server">
</telerik:RadEditor>
</telerik:RadPageView>
</telerik:RadMultiPage>
</div>

EditorWithTabsInUserControl.aspx:
<%@ Page Title="" Language="C#" AutoEventWireup="true" CodeBehind="EditorWithTabsInUserControl.aspx.cs" Inherits="WebApplication1.EditorWithTabsInUserControl" validateRequest="false"%>
<%@ Register Src="~/UserControl.ascx" TagPrefix="uc" TagName="UserControl"%>
<!DOCTYPE html>
<html lang="en">
<head id="Head1" runat="server">
<meta charset="utf-8" />
<title>RadEditor Leak</title>
</head>
<body>
<form id="Form1" runat="server">
<asp:ScriptManager runat="server">
<Scripts>
</Scripts>
</asp:ScriptManager>
<telerik:RadAjaxManager ID="RadAjaxManager" runat="server" UpdatePanelsRenderMode="Inline"/>
<telerik:RadAjaxLoadingPanel ID="RadAjaxLoadingPanel" runat="server" />
<uc:UserControl runat="server" ID="uxUserControl" />
</form>
</body>
</html>

I was able to produce memory leaks with this page in IE8. Attached is a screenshot of my sIEve output. I loaded the page, clicked each tab from left to right, clicked about:blank, reloaded the page and clicked each tab from left to right again.

I also created a page similar to that one with RadTabs and RadMultiPageViews, except with no RadEditor. Clicking from tab to tab on that page produces no memory leaks.

In conclusion, the latest Telerik no longer has memory leaks for a single RadEditor, but does leak if the RadEditor is used in RadTabs with RadMultiPageViews.

Let me know how I can send my sample app to you - I can't attach it to a post.

Thanks again for your help,
Scott

answered on 11 Feb 2014, 02:00 PM

Hi Guys,

Thank you for getting this problem to out attention and helping us to reproduce it.

The RadEditor set its content to a hidden textarea element on submit and/or postback by calling set_contentHiddenTextareaValue function. This function set the value property of the textarea which causes the memory leak.

The workaround could be just to use jquery to set the textarea value. You could add the following overwrite at the end of the page where you use the RadEditor.

<script type="text/javascript">

$telerik.$.extend(Telerik.Web.UI.RadEditor.prototype,

{

set_contentHiddenTextareaValue: function(htmlValue) {

$telerik.$(this._contentHiddenTextarea).text($T.Editor.Utils.encodePostbackContent(htmlValue));

}

});

</script>

Here is a screenshot from my test page after applying the workaround.

I have logged the issue to our system and we will fix it most likely for the next official release Q1 2014 which is scheduled for the end of February 2014.

In case of any questions, do not hesitate to contact us.

Regards,
Nikolay
Telerik

If you want to get updates on new releases, tips and tricks and sneak peeks at our product labs directly from the developers working on the UI for ASP.NET AJAX, subscribe to the blog feed now.

Product Bundles

DevCraft

Web

Mobile

Document Management

Desktop

Reporting & Mocking

Automated Testing

CMS

UI/UX Tools

Debugging

Free Tools

Support and Learning

Productivity and Design Tools

RadEditor memory leak in IE8

6 Answers, 1 is accepted