RadEditor scrolling on Ajax request

8 posts, 0 answers
  1. Kumar
    Kumar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 17 Jan 2012 Link to this post

    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.
  2. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 19 Jan 2012 Link to this post

    Hello,

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

    Best regards,
    Rumen
    the Telerik team
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  3. Kumar
    Kumar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 20 Jan 2012 Link to this post

    <%@ 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.






  4. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 24 Jan 2012 Link to this post

    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
    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 RadControls for ASP.NET AJAX, subscribe to their blog feed now
  5. Kumar
    Kumar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 03 Feb 2012 Link to this post

    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?
  6. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 06 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
  7. Kumar
    Kumar avatar
    4 posts
    Member since:
    Jan 2012

    Posted 14 Feb 2012 Link to this post

    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.


  8. Rumen
    Admin
    Rumen avatar
    14351 posts

    Posted 17 Feb 2012 Link to this post

    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
    Sharpen your .NET Ninja skills! Attend Q1 webinar week and get a chance to win a license! Book your seat now >>
Back to Top