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

RadEditor with Ajax, using UpdatePanelAnimationExtender, issue on FireFox

3 Answers 166 Views

Editor

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

Laurie asked on 12 Nov 2007, 05:59 PM

I'm using RadEditor and Ajax, and recently added an UpdatePanelAnimationExtender to display a "Saving..." message when the user hits a save button. This works just fine in IE 6 and 7, but in Firefox RadEditor shows up on load without any contents (these are being written to RE in pagebehind) and without the user's having the ability to click in RadEditor to edit. The code is as below. Any help would be much appreciated.

Laurie

ASPX file:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="testit.aspx.cs" Inherits="testit" Title="Untitled Page"
    EnableEventValidation="false" ValidateRequest="false" %>

<%@ Register Assembly="RadEditor.Net2" Namespace="Telerik.WebControls" TagPrefix="radE" %>
<html>
<head>
    <script type="text/javascript" language="javascript">

    function onUpdating(){
        // get the update progress div
        //alert("onupdating");
        var updateProgressDiv = $get('updateProgressDiv');
        // make it visible
        updateProgressDiv.style.display = '';

        //    set the progress element to this position
        Sys.UI.DomElement.setLocation (updateProgressDiv, 200, 200);

    }

    function onUpdated() {
        // get the update progress div
        //alert("onupdated");
        var updateProgressDiv = $get('updateProgressDiv');
        // make it invisible
        updateProgressDiv.style.display = 'none';
        Sys.UI.DomElement.setLocation (updateProgressDiv, -300, -300);
    }

    </script>
</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
    </asp:ScriptManager>
<asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate>
    <radE:RadEditor ID="RadEditor1" runat="server">
    </radE:RadEditor>
</ContentTemplate>
    <Triggers>
    <asp:AsyncPostBackTrigger ControlID="btnNumReferences" EventName="Click" /></Triggers>
    </asp:UpdatePanel>
            <ajaxToolkit:UpdatePanelAnimationExtender ID="upaeSaving" runat="server" TargetControlID="UpdatePanel1">
            <Animations>
                <OnUpdating>
                    <Parallel duration="0">
                        <%-- place the update progress div over the gridview control --%>
                        <ScriptAction Script="onUpdating();" />
                        <%-- fade-out the GridView --%>
                        <%-- FadeOut minimumOpacity=".5" /--%>
                     </Parallel>
                </OnUpdating>
                <OnUpdated>
                    <Parallel duration="0">
                        <%-- fade back in the GridView --%>
                        <%-- FadeIn minimumOpacity=".5" /--%>
                        <%--find the update progress div and place it over the gridview control--%>
                        <ScriptAction Script="onUpdated();" />
                    </Parallel>
                </OnUpdated>
            </Animations>
        </ajaxToolkit:UpdatePanelAnimationExtender>

    <asp:Button ID="btnNumReferences" runat="server" Text="Update Text" OnClick="btnNumReferences_Click" />
</form>
                <div id="updateProgressDiv" style="display: none;">
                    <asp:Image ID="Image1" runat="server" ImageUrl="~/images/Saving.gif" />
                </div>

</body></html>

Code File:
using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class testit : System.Web.UI.Page
{
    protected void Page_Init(object sender, EventArgs e)
    {
        RadEditor1.Html = "First Time Through";
    }
    protected void Page_Load(object sender, EventArgs e)
    {
    }
    protected void btnNumReferences_Click(object sender, EventArgs e)
    {
        RadEditor1.Html = "Second Time Through";
    }
}

3 Answers, 1 is accepted

answered on 13 Nov 2007, 02:22 PM

Hi Laurie,

Which RadEditor version are you using? I can see from the code that you have the normal RadEditor for ASP.NET and not the "Prometheus" version. I tried the 7.21 release with the code you sent and managed to reproduce the problem. It turned out that the UpdatePanelAnimationExtender moves the editor HTML element, which produces the error in Firefox.

The problem will be fixed in the next official RadEditor release. If you want to get the fix earlier, please open a formal support ticket and we will send you a hotfix build. The fix actually adds a new function to the RadEditor API. You need to call that function after the page loads in order to fix the compatibility problem between the editor and the UpdatePanelAnimationExtender.

<script type="text/javascript">  

    // Attach a handler to the load event.  

    Sys.Application.add_load(applicationLoadHandler);  

    function applicationLoadHandler() {  

        if (typeof(RadEditorGlobalArray) != "undefined")  

            for (i=0;i<RadEditorGlobalArray.length;i++);  

                RadEditorGlobalArray[0].OnParentNodeChanged();  

    }  

</script>

The script needs to be added at the bottom of your page (after the ScriptManager control). It goes through all editors on the page and updates them.

Kind regards,
Lini
the Telerik team

Instantly find answers to your questions at the new Telerik Support Center

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 with Ajax, using UpdatePanelAnimationExtender, issue on FireFox

3 Answers, 1 is accepted