RadEditor scrolling on Ajax request

[Kumar]

Hi,
Here is the problem that i encountered working on a project.
I have a RadEditor and there is an timer control (ajaxified) which auto saves the text in the RadEditor.
Say that I am on the page and I paste lot of text and scrolled to the bottom and left my cursor.
After it autosaves, the scroll position moves to the top in IE9 compatibility mode(IE7).
but works fine on IE9.
Also, here is another interesting thing that i noticed, when i publish on my development environment it works fine on IE9 compatibility mode(IE7) but not on IE9.
I couldn't find any workarounds to fix this.

[Rumen]

Hello,

Please, see the following forum on the subject: IE9 Issue. It could be helpful for your scenario.

Best regards,
Rumen
the Telerik team

[Kumar]

<%@ Page Title="Home Page" Language="vb" MasterPageFile="~/Site.Master" AutoEventWireup="false"

    CodeBehind="Default.aspx.vb" Inherits="Test_Radeditor._Default" %>

<%@ Register Assembly="Telerik.Web.UI" Namespace="Telerik.Web.UI" TagPrefix="telerik" %>

 

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">   

     

</asp:Content>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">

 

 

    <h2>

 

        Welcome to ASP.NET!

    </h2>

    <p>

        To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">www.asp.net</a>.

    </p>

    <p>

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

     <telerik:RadAjaxManager ID="RadAjaxManager1" runat="server" >        

        <AjaxSettings>       

          <Telerik:AjaxSetting AjaxControlID="RadAjaxManager1">

            <UpdatedControls>

              <Telerik:AjaxUpdatedControl ControlID="RadAjaxManager1" LoadingPanelID="RadAjaxautosavepanel" />

            </UpdatedControls>

          </Telerik:AjaxSetting>

        </AjaxSettings>

  </telerik:RadAjaxManager>

    <telerik:RadAjaxPanel ID="radAjaxPanel1" runat="server">

    <asp:Label ID="lblTime" Text="Not Autosaved yet" runat="server"></asp:Label>

    <asp:Timer ID="timerAutoSave" runat="server" Enabled="True" /><br/><br />

    <asp:Button ID="btnsave" runat="server" Width="15" Text="save" /><br /><br />

   </telerik:RadAjaxPanel>

    <Telerik:RadEditor ID="radEdit1" runat="server" EditModes="Design, Html" NewLineBr="False"             

            ForeColor="Black" >           

        </Telerik:RadEditor>

     

         </p>

    <p>

         </p>

    <p>

        You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&;clcid=0x409"

            title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.

    </p>

 <telerik:RadScriptBlock ID="rsb" runat="server">

   

<script type="text/javascript" language="javascript">

     

 

    function display() {

        

    }

    

</script>

 </telerik:RadScriptBlock> 

</asp:Content>

Hi Rumen,
Here is my default.aspx page in which i have the radeditor control and the timercontrol ajaxified.
So when i debug it on my local using IE9, the scroll bar in the radeditor control did not scroll to the
top when it auto saves which is good(having pasted some text in the control to have that scorll bar come
up first).But when i hit the compatibility mode on IE9 and repeat the above step, after it auto saves,
the scrollbar moves to the top.
I looked into that forum you referred me, i tried adding meta tag and stuff but it did not work.
So, is it something you guys are working on this fix or is there any fix.
If you cannot reproduce the issue on your side, please let me know i will send you the sln file or the video.








[Rumen]

Hi,

Thank you for reporting the very important details that you test the editor in compatibility mode of IE9. As you can see the problem is fixed in IE9 by the browser's developers.

I was able to reproduce this browser bug and was able to solve it by rendering the content area of RadEditor as an editable DIV element. You can do that by setting the ContentAreaMode property to "Div".

Best regards,
Rumen
the Telerik team

[Kumar]

Hi Rumen,
Although the above link was helpful to get this problem fixed but the css styles are not being applied to the control.
So, I also referred forums on manually registering css styles and i did apply manually and it shows up.
However, even my master page styles and content page css styles are getting added into the radeditor "Apply css style" toolbar.
Is there any way that we could only show set of styles which we manually registered in the radeditor "Apply css style" toolbar?

[Rumen]

Hello,

You can load only the desired classes in the Apply Class dropdown via the CssClasses collection. You can find more information in this article: CSS Styles.

Best regards,
Rumen
the Telerik team

[Kumar]

Hi Rumen,
yep that was helpful, however i have another question on how we make use of .reContentArea Callout{.....} classes to show up in Apply Css class in radeditor
Like i tried adding 
<classes>
    <class name="Clear Class" value="" />
    <class name="Callout" value=".reContentArea Callout" />
    <class name="Callout" value=".reContentAreaCallout" />
    <class name="Callout" value=".Callout"/>
    <class name="Callout" value="Callout"/>    
  </classes>

None of the above attempt works in showing the .reContentArea class  in Apply Css Class.

[Rumen]

Hi,

The Callout class will be populated in the Apply Class dropdown only if it is defined on the page with RadEditor, e.g.

<style type="text/css">
.reContentAreaCallout { color: red; }
.Callout { padding: 1px 1px 1px 1px; }
</style>

All the best,
Rumen
the Telerik team