HtmlEditor Render Bug

  1. #1

    HtmlEditor Render Bug

    Hi, in my sample sometimes an html editor does not render in the correct way.
    In this case the toolbar is disabled but the editor is enabled; but the most important bug is that the .Text Property does not return the visualized text.
    It seems that the text doesn't update when the HtmlEditor is in that "corrupted" state.
    To reproduce, please refresh (F5) the page several times and switch the 2 groups and the 4 panels; when you see the HtmlEditor ToolBar disabled (often in the second group of sections) update the text and click ShowText.
    I attach a screenshot too.

    Test.aspx
    <%@ Page Language="C#" AutoEventWireup="true" ValidateRequest="false" CodeBehind="Test.aspx.cs"
        Inherits="Test.Test" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <%@ Register Src="UserControls/Sections/testUserControl.ascx" TagName="testUserControl"
        TagPrefix="uc3" %>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
        <title></title>
    </head>
    <body>
        <form id="form1" runat="server">
        <asp:ScriptManager ID="ScriptManager1" runat="server" />
        <ext:ResourceManager ID="ResourceManager1" runat="server" />
        <ext:ContainerLayout ID="ContainerLayout1" runat="server">
            <Content>
                <ext:Viewport ID="Viewport2" runat="server" AutoDoLayout="true" Layout="border" Margins="5">
                    <Items>
                        <ext:Panel ID="BottomPanel" Visible="true" runat="server" Collapsible="false" Header="false"
                            TabMenuHidden="true" Height="145" Region="North" Split="false" Title="North">
                            <Items>
                                <ext:Button ID="btnShowTest" runat="server" Text="ShowText">
                                    <DirectEvents>
                                        <Click OnEvent="Click">
                                        </Click>
                                    </DirectEvents>
                                </ext:Button>
                                <ext:TextArea ID="textArea" runat="server" Width="400" Height="100">
                                </ext:TextArea>
                            </Items>
                        </ext:Panel>
                        <ext:GroupTabPanel ID="GroupTabPanel" runat="server" AutoDoLayout="true" AutoRender="false"
                            Region="Center" TabWidth="180" AutoScroll="false" DeferredRender="false">
                            <Groups>
                                <ext:GroupTab ID="GroupTab2" runat="server" MainItem="0" AutoWidth="true" Expanded="false"
                                    AutoRender="false" DeferredRender="false">
                                    <Items>
                                        <ext:Panel ID="GroupPanel1" runat="server" Title="GroupPanel1" TabTip="GroupPanel1"
                                            AutoRender="false">
                                        </ext:Panel>
                                        <ext:Panel ID="Panel1" runat="server" Title="Section1" Layout="fit" Icon="TagBlue"
                                            TabTip="Section1" AutoScroll="true" Padding="0" AutoRender="false">
                                            <Content>
                                                <ext:Panel ID="Pan1" runat="server" Closable="false" Title="Section1" Icon="None">
                                                    <Content>
                                                        <uc3:testUserControl ID="TestUserControl1" runat="server" />
                                                    </Content>
                                                </ext:Panel>
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel2" runat="server" Title="Section2" Layout="fit" Icon="TagBlue"
                                            TabTip="Section2" AutoScroll="true" Padding="0" AutoRender="false">
                                            <Content>
                                                <ext:Panel ID="Pan2" runat="server" Closable="false" Title="Section2" Icon="None">
                                                    <Content>
                                                        <uc3:testUserControl ID="TestUserControl2" runat="server" />
                                                    </Content>
                                                </ext:Panel>
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                                <ext:GroupTab ID="GroupTab1" runat="server" MainItem="0" AutoWidth="true" Expanded="false"
                                    AutoRender="false" DeferredRender="false">
                                    <Items>
                                        <ext:Panel ID="GroupPanel2" runat="server" Title="GroupPanel2" TabTip="GroupPanel2"
                                            AutoRender="false">
                                        </ext:Panel>
                                        <ext:Panel ID="Panel3" runat="server" Title="Section3" Layout="fit" Icon="TagBlue"
                                            TabTip="Section3" AutoScroll="true" Padding="0" AutoRender="false">
                                            <Content>
                                                <ext:Panel ID="Pan3" runat="server" Closable="false" Title="Section3" Icon="None">
                                                    <Content>
                                                        <uc3:testUserControl ID="TestUserControl3" runat="server" />
                                                    </Content>
                                                </ext:Panel>
                                            </Content>
                                        </ext:Panel>
                                        <ext:Panel ID="Panel4" runat="server" Title="Section4" Layout="fit" Icon="TagBlue"
                                            TabTip="Section4" AutoScroll="true" Padding="0" AutoRender="false">
                                            <Content>
                                                <ext:Panel ID="Pan4" runat="server" Closable="false" Title="Section4" Icon="None">
                                                    <Content>
                                                        <uc3:testUserControl ID="TestUserControl4" runat="server" />
                                                    </Content>
                                                </ext:Panel>
                                            </Content>
                                        </ext:Panel>
                                    </Items>
                                </ext:GroupTab>
                            </Groups>
                        </ext:GroupTabPanel>
                    </Items>
                </ext:Viewport>
            </Content>
        </ext:ContainerLayout>
        </form>
    </body>
    </html>
    Test.aspx.cs
    using System;
    using Ext.Net;
    
    namespace Test
    {
        public partial class Test : System.Web.UI.Page
        {
            protected void Page_Load(object sender, EventArgs e)
            {
                if (!this.IsPostBack)
                {
                    this.TestUserControl1.SectionText.Text = "Section1";
                    this.TestUserControl2.SectionText.Text = "Section2";
                    this.TestUserControl3.SectionText.Text = "Section3";
                    this.TestUserControl4.SectionText.Text = "Section4";
                }
    
            }
    
            protected void Click(object sender, Ext.Net.DirectEventArgs e)
            {
                this.textArea.Text = "Section1: " + this.TestUserControl1.SectionText.Text + Environment.NewLine +
                    "Section2: " + this.TestUserControl2.SectionText.Text + Environment.NewLine +
                    "Section3: " + this.TestUserControl3.SectionText.Text + Environment.NewLine +
                    "Section4: " + this.TestUserControl4.SectionText.Text;
            }
        }
    }
    testUserControl.ascx
    <%@ Control Language="C#" AutoEventWireup="true" CodeBehind="testUserControl.ascx.cs"
        Inherits="Test.UserControls.testUserControl" %>
    <%@ Register Assembly="Ext.Net" Namespace="Ext.Net" TagPrefix="ext" %>
    <ext:FitLayout ID="FitLayout1" runat="server">
        <Items>
            <ext:Panel ID="panXYZ" runat="server" Layout="Fit">
                <Items>
                    <%--htmleditor--%>
                    <ext:HtmlEditor ID="SectionText" runat="server" EnableAlignments="true" EnableFormat="true"
                        EnableLists="true" EnableColors="false" EnableFont="false" EnableFontSize="false"
                        EnableLinks="false" EnableSourceEdit="false" EnableTheming="false" EnableViewState="true" AutoRender="false" Visible="true"/>
                </Items>
            </ext:Panel>
        </Items>
    </ext:FitLayout>
    Attached Thumbnails Click image for larger version. 

Name:	htmleditor bug.jpg 
Views:	202 
Size:	91.9 KB 
ID:	2960  
    Last edited by htmlEditor; Jul 08, 2011 at 11:30 PM.
  2. #2
    Hi,

    I cannot reproduce it.
    I see that you use IE9 with Compatibility mode, that mode is not supported
    Try to turn off compatibility mode and retest
    Last edited by geoffrey.mcgill; Jul 10, 2011 at 6:48 PM.
  3. #3
    I reproduce it on IE9 with or without compatibility mode (I attach a screenshot); on IE7 I reproduce it more easily.

    To reproduce: Load page, select second group panel, select section 4, then section 3, select first group panel, select section 1, then section 2, F5, select second group panel,select section 4, then section 3, select first group panel, select section 1, then section 2, F5, select second group panel, select section 4, then section 3, select first group panel, select section 1, then section 2, F5...
    You have to be very patient.

    I also reproduce it by adding in the Activate DirectEvent of Panel1, Panel2, Panel3, Panel4 the following code:
     this.TestUserControl1.SectionText.Render();
    this.TestUserControl2.SectionText.Render();
    this.TestUserControl3.SectionText.Render();
    this.TestUserControl4.SectionText.Render();
    In that case to reproduce the bug you have not to refresh the page but only have to switch the selection of the 4 sections.
    Click image for larger version. 

Name:	htmleditor_bug_IE9_not_comp.jpg 
Views:	164 
Size:	89.8 KB 
ID:	2963
    Last edited by htmlEditor; Jul 11, 2011 at 8:39 AM.
  4. #4
    Hi, any news?
  5. #5
    Hi,

    Unfortunately, I was unable to reproduce the problem.

    Any further details you can provide us?
  6. #6
    No, there are not other details.

    I can say that I use Visual Studio 2010 Premium and that I have a warning: "Element 'ScriptManager' is not a known element" but I don't think it causes the bug.
  7. #7
    Please try this technique to isolate the problem.
    http://forums.ext.net/showthread.php...6687#post56687

Similar Threads

  1. HtmlEditor
    By arya009 in forum 1.x Help
    Replies: 10
    Last Post: Dec 03, 2012, 8:32 PM
  2. [CLOSED] ListView with HtmlEditor -> HtmlEditor value is null
    By SouthDeveloper in forum 1.x Legacy Premium Help
    Replies: 8
    Last Post: Apr 17, 2012, 12:50 AM
  3. [CLOSED] Toggle Render? Refresh Render?
    By rthiney in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: Jul 08, 2011, 3:13 PM
  4. HtmlEditor contains
    By okutbay in forum 1.x Help
    Replies: 0
    Last Post: May 06, 2010, 9:37 AM
  5. Lag Before Render
    By simonmicheal in forum 1.x Help
    Replies: 3
    Last Post: Oct 08, 2009, 5:12 PM

Posting Permissions