[FIXED] [V0.6] Load UserControl with Tab + HtmlEditor dinamically

Page 1 of 3 123 LastLast
  1. #1

    [FIXED] [V0.6] Load UserControl with Tab + HtmlEditor dinamically



    Hi Coolite team,

    I'm wondering if someone can help me on a problem I'm facing using Coolite HtmlEditor.
    It's been placed inside an User Control and the usercontrol has an TabPanel with Tabs which are been dinamically loaded. For simplicity sake, I'm just loading one tab here.

    The error is: Invalid argument. coolite.axd (...this.iframe.style.width=D+"px"...)

    D = -2 at this moment.

    I putted the Editor inside an AnchorLayout following the recommendations I read in this forum, because AutoWidth property, for instance, doesn't seems to control correctly the width size of the internal Editor iframe.

    I am sending a simple sample to reproduce the problem. I left the update panels just to be consistent with my project.

    CooliteEditorTest4.aspx:
    <%@ Page Language="C#" EnableEventValidation="false" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <script runat="server">
        protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                LoadTabs();
                ChangeView(false);
            }
        }
    
    
        private void LoadTabs()
        {        
            System.Web.UI.Control myUserControl = LoadControl("~/HtmlEditorUC.ascx");    
            
            if (myUserControl != null)
            {
                myUserControl.ID = "HtmlEditorUC1";
    
    
                Tab myTabControl = new Tab();
                myTabControl.Title = "Tab3";
                myTabControl.ContentContainer.ID = "TabControlContentContainer1";
                myTabControl.AutoHeight = true;
                myTabControl.ContentContainer.Controls.Add(myUserControl);
                TabPanel1.Tabs.Add(myTabControl);
            }            
        }
    
    
        private void ChangeView(Boolean type)
        {
            if (type)
            {
                Panel_List.Hide();
                Panel_Detail.Show();
            }
            else
            {
                Panel_List.Show();
                Panel_Detail.Hide();
            }
        }
    
    
        protected void BtnBack_Click(object sender, EventArgs e)
        {
            ChangeView(true);
        }
    
    
    </script>
    
    
    <!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 id="Head1" runat="server">
        <title>Coolite Editor Test 4</title>
    </head>
    <body>
        <p>
            <a href="CooliteEditorTest4.aspx">Reload</a></p>
        <form id="form1" runat="server">
        <ext:ScriptManager ID="ScriptManager1" runat="server" />
        <asp:ScriptManager ID="ScriptManager3" runat="server" />
        <asp:Label ID="lblMessage" runat="server" />
        <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
            <ContentTemplate>
                <ext:Panel ID="Panel_List" runat="server">
                    <Content>
                        <h2>
                            List</h2>
                        <asp:Button ID="BtnGoNext" runat="server" Text="GoNext" CausesValidation="false"
                            OnClientClick="Panel_List.hide();Panel_Detail.show();"  />
                    </Content>
                </ext:Panel>
                <ext:Panel ID="Panel_Detail" runat="server">
                    <Content>
                        <h2>
                            Information</h2>
                        <asp:Label ID="Label2" runat="server"></asp:Label>
                        <asp:Label ID="lblDescription" runat="server"></asp:Label>
                        <ext:TabPanel ID="TabPanel2" runat="server" ActiveTab="0" Title="TabPanel2">
                            <Tabs>
                                <ext:Tab ID="TabDetails" runat="server" Title="Details" IconCls="tabs" AutoHeight="true" AutoScroll="True">
                                    <Content>
                                        <asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional" ChildrenAsTriggers="false">
                                            <ContentTemplate>
                                                <div runat="server" id="Div1" visible="true">
                                                    <h2>
                                                        List 2</h2>
                                                
    
                                                <br />
                                                <ext:TabPanel ID="TabPanel1" runat="server" ActiveTab="0" Height="300">
                                                    <Tabs>
                                                        <ext:Tab ID="Tab1" runat="server" Title="Tab 1">
                                                            <Content>
                                                            </Content>
                                                        </ext:Tab>
                                                        <ext:Tab ID="Tab2" runat="server" Title="Tab 2">
                                                            <Content>
                                                            </Content>
                                                        </ext:Tab>
                                                    </Tabs>
                                                </ext:TabPanel>
                                                <br />
                                            </ContentTemplate>
                                        </asp:UpdatePanel>
                                    </Content>
                                </ext:Tab>
                            </Tabs>
                        </ext:TabPanel>
                        <div style="text-align: center;">
                            <asp:Button ID="BtnBack" runat="server" Text="Back" CausesValidation="false" &#111;nclick="BtnBack_Click" />
                        
    
                    </Content>
                </ext:Panel>
            </ContentTemplate>
        </asp:UpdatePanel>
        </form>
    </body>
    </html>
    HtmlEditorUC.ascx:
    <%@ Control Language="C#" AutoEventWireup="true" %>
    
    
    <%@ Register Assembly="Coolite.Ext.Web" Namespace="Coolite.Ext.Web" TagPrefix="ext" %>
    
    
    <script runat="server">
        
        protected void Page_Load(object sender, EventArgs e)
        {
            
        }
        
    </script>
    
    
    <ext:Panel ID="Panel_Text" runat="server" Title="Panel Text" AutoHeight="false" Border="false"
        BodyBorder="false" Frame="true" Collapsible="true">
        <Content>
            <ext:Panel ID="Panel1" runat="server" Height="300" Title="Short Text" Border="false"
                BodyBorder="false" Frame="true">
                <Content>
                    <ext:FitLayout ID="FitLayout1" runat="server">
                        <ext:HtmlEditor ID="HtmlEditor1" runat="server">
                        </ext:HtmlEditor>
                    </ext:FitLayout>
                </Content>
            </ext:Panel>
            <ext:Panel ID="Panel2" runat="server" Height="200" Title="Long Text" Border="false"
                BodyBorder="false" Frame="true">
                <Content>
                    <ext:FitLayout ID="FitLayout2" runat="server">
                        <ext:HtmlEditor ID="HtmlEditor2" runat="server">
                        </ext:HtmlEditor>
                    </ext:FitLayout>
                </Content>
            </ext:Panel>
        </Content>
    </ext:Panel>
    Any workarround would be very appreciated.

    Leo.
  2. #2

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Dear Coolite team,

    At the moment the main issue I am facing is related to HtmlEditor.
    The problems I reported here in this thread happens not only when the Editor is dinamically loaded (code-behind as I thought). Sometimes the error is a bit different:

    ---------------------------
    Error
    ---------------------------
    A Runtime Error has occurred.
    Do you wish to Debug?
    
    
    Line: 64
    Error: Object expected
    ---------------------------
    Yes   No   
    ---------------------------
    I'm using ext:TextArea for the moment just while I can't fix this problem, but seems that ext:TextArea also has some problems with sizing even putting it inside FitLayout or AnchorLayout. I've seen the examples here in this forum, and some hacks, but I could not find a complete solution for HtmlEditor.

    Please, Can someone help with this?

    Thanks.
    Leonardo.
  3. #3

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically

    Hi Leonardo,

    I'm working through your examples now.

    Is the HtmlEditor visible/shown on Page_Load? With the v0.5.x release, the HtmlEditor can not be hidden on initial page_load. For example, the HtmlEditor can not be in a Tab which is not active on page_load.

    This HtmlEditor issue has been fixed with v0.6.
    Geoffrey McGill
    Founder
  4. #4

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Thanks for your reply Geoffrey

    No, there is no hide/show property set to the HtmlEditor. But there is for the panel which the editor is within. As you can see on my sample page: Panel_List.Hide() / .Show().

    If we focus just on this example for the moment and find out why it is throwing "Invalid argument" exception, maybe it can explain any other problem with the Editor.

    I keep trying to fix and change it. As I told you I've done more tests and don't seems to be just because it is inside a tab dinamically inserted as I thought. But I tried my best to give you a sample to narrow down the problem and help on the solution.

    As I also can see, the problem doesn't seems to be the nested updatepanel. I've also done some tests with updatepanels changing the UpdateMode/ChildrenAsChild properties or even removing the nested updatepanel and the error persists.

    Thanks for your support. I really look forward to get this problem solved.
    Let me know if you need anything from my side.

    Leo.
  5. #5

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Hi Geoffrey,

    Any news about this HtmlEditor problem?
    Today I tried to update de version to the one I got on SVN v0.6.0.
    Unfortunately I ran into even more problems. Must be all silly thing I am doing, but I am wondering if you got any Breaking Changes documentation for migrating version v0.5.4 to v0.6.0?

    First I got some build errors related to 2 missing assemblies Coolite.Utilities and Newtonsoft.Json that I could managed to solve even before find this post http://forums.ext.net/showthread.php?postid=1230.aspx.

    One question here: Do I need to reference Coolite.Utilities and Newtonsoft.Json DLL's in my project or just copy them to my bin folder?

    Then I put the new dll in my project and the screens stop working. The weird was that I got no errors at all. No Javascript errors, anything. To make the long story short, I remembered I saw one post about changes UpdatePanel depending on UpdateMode property.

    I was using:

    UpdateMode="Conditional" ChildrenAsTriggers="false"
    Then I changed to:

    UpdateMode="Always" ChildrenAsTriggers="true"
    That solves the one problem for the moment, but I still want to discuss about this in the future...

    The other problem was with Listeners. I was inserting Listeners at CodeBehind and seems that the sintaxe changed a little bit:

    From:
    tb2.Listeners.Resize = new Coolite.Ext.Web.Listener("myHandler...");
    To:
    Coolite.Ext.Web.Listener listener = new Coolite.Ext.Web.Listener();
    Coolite.Ext.Web.Listener listener = new Coolite.Ext.Web.Listener();
    listener.Handler = "myHandler javascript";
    tb2.Listeners.Resize = listener;

    Is that the new and correct way of doing this on code-behind?

    The other thing was some issues with layout. I think is with AutoHeight, AutoWidth properties. I could not finish testing it.

    At least, but not last, the HtmlEditor still not work on v0.6.0. It thows the same problem. Please, can someone give me an estimative if it will be possible to do a workaround or something to fix the problem?
    I am desperate to make this Editor work. I need you help, please!

    Thanks

    Leonardo.
  6. #6

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically

    I apologize for the build errors. The project is still in a weird unstable state at the moment. We're working on some core API revision and it's affecting all controls. I'm hoping SVN should be stabilized within the next 4 hours.

    I started on a major revision to the <asp:UpdatePanel> support and got about 50% through. The other 50% should be complete within the next day or two. Any use of the <asp:UpdatePanel> with the current build (Revison #257) will give mixed results.

    I'm not sure why the references to Coolite.Utilities and Json.net keep dropping. I'll fix the problem before the end of the day.

    Both of your Listener syntax examples should work.

    I did reproduce your original HtmlEditor sample, but fixing related issues took me down a different path. If I remember correctly, one thing I noticed was the HtmlEditor is buried inside a Tab which is not visible on initial Page_Load. There was some work done in ExtJS 2.2 to improve support for hidden HtmlEditor's on load, although I suspect problems still exist. I need to do more testing regarding this feature.

    Give me either 4 hours (or 28 hours) to respond again.

    Geoffrey McGill
    Founder
  7. #7

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Hi Geoffrey,

    Thanks for your reply and all your effort to fix all issues.
    Don't worry, I understand your position, and I can see you guys are doing an excellent job. Unfortunately my project is already on live, and the Editor is very important at this stage.
    As I said, my main concern at the moment is about this HtmlEditor. It was working before, but I had to reajust the layout and other things and it stopped to work.
    I remember you asking me last time about this visible property. I've seen many threads about it, even in ExtJs forum. No. I am not using Tab visible. In fact, I am using a Main Coolite Panel and setting it to Hide/Show, as it were a standard asp View/Multiview controls. That means, instead of using <asp:View...> I just set Panel Hide/Show on codebehind.
    The editor is in my second Panel which is Hidden by default on Page_Load. That means it will be displayed just when the user select an option on the first screen panel.
    The way I sent you the example you can see exactly what is my scenario.


    But I tried NOT to set any visibility property, indeed. I definitelly don't think this issue is related to Visibility. But I do believe it is related to something in LAYOUT and Editor internal iframe. I am guessing here.

    As I sent you already, the error I am getting:

    ---------------------------
    Error
    ---------------------------
    A Runtime Error has occurred.
    Do you wish to Debug?
    
    
    Line: 136
    Error: Invalid argument.
    ---------------------------
    Yes   No   
    ---------------------------

    Sorry I still don't know: Do I need to reference Coolite.Utilities and Newtonsoft.Json DLL's in my project or just copy them to my bin folder or it is an issue and I shouldn't been asked about this dlls?

    Once again, thank you very much for your support.
    I am waiting for your reply and willing to test anything. Please, let me know if there is anything I can help.

  8. #8

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Hi Geoffrey,

    After send you the latest post I remember that I was using another option that could be related with visibility. The Editor is inside a Panel with Collapsed=true.

    Then I set it to false and started to get different error messages. I will write the messages here. Maybe it can help in some way:

    Internet Explorer (IE7):

    ---------------------------
    Windows Internet Explorer
    ---------------------------
    Internet Explorer cannot open the Internet site http://localhost/My-Project/start.aspx.
    
    
    Operation aborted
    ---------------------------
    OK   
    ---------------------------
    It happens when I click on the left hand side menu that is located on West region. So, on IE, it not even open my page on Central region (iframe) if I set the property to Collapsed=true.
    Then it is followed by the message:


    ---------------------------
    Error
    ---------------------------
    A Runtime Error has occurred.
    Do you wish to Debug?
    
    
    Line: 76
    Error: 'null' is null or not an object
    ---------------------------
    Yes   No   
    ---------------------------

    Debugging:

    ...this.el=H.createChild({id:this.id,cls:this.baseCls},G)...

    On Firefox, it opens the page on my Center region (iframe), but the error I got on Firebug is:


    [Exception... "Component returned failure code: 0x80040111 (NS_ERROR_NOT_AVAILABLE) 
    [nsIDOMNSHTML&#100;ocument.designMode]"  nsresult: "0x80040111 (NS_ERROR_NOT_AVAILABLE)"  
    location: "JS frame :: http://localhost/My-Project/extjs/ex...js/coolite.axd :: anonymous :: line 136"  data: no]
    
    
    http://localhost/My-Project/extjs/ex...js/coolite.axd 
    Line 136
    There are 2 Editors on this screen. I noticed that just one renders on FF and it cames with false inside the Editor's iframe body as you can see on the image attached: FF-HTMLEditor.jpg

    The second editor hasn't been rendered on IE as well when Collapsed was true. I turn back the Collapsed property to true just to get the screen after the Invalid Argument message on IE. My surprise was that it no longer worked as before. It keeps showing me the messages I reported here for IE. Even cleaning browse caching, restartin IIS, etc.

    I don't know... it is so weid for me... maybe it will make sense for you guys.

    The only thing I know is that since I started using Coolite I reported here some issues with IIS7 and Vista. Sometimes I still get this weird problems that I need to change the CleanResourceUrl property on Coolite ScriptManager.
    And on FF, seems that someone already had this problem with the Editor and Ext 2.2. Please, have a look at this:


    Mistake to change Ext ver. 2.2: http://extjs.com/forum/showthread.php?p=209109

    Thanks.

    Leo.

  9. #9

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically



    Hi Coolite team,

    Sorry to say that I didn't managed to solve the issues I pointed in my last thread. Today I got the latest release again (278) and tested with no luck.
    What make things even worst is that problem on IE (Operation Aborted) I mentioned before. It is when the first panel is rendered to screen.

    I've seen some people experiencing the same issue, and all point to the Ext altering the a DOM element before it has been loaded. Here a couple of links:

    http://extjs.com/forum/showthread.php?t=4778
    http://extjs.com/forum/showthread.php?t=15575

    I put the script manager in Debug mode, but the far I could see is that it happens onRender of my Panel:

    Microsoft JScript runtime error: 'null' is null or not an object
    
    
    
    this.el = ct.createChild({
                    id: this.id,
                    cls: this.baseCls
                }, position);
    I am really in trouble with this, trying to release a version to my customer at least with a TextArea instead of the Editor, but I got stuck in this problem.

    Sorry, it is very urgent to us. Any help would be very appreciated.

    Thanks.
    Leo.
  10. #10

    RE: [FIXED] Load UserControl with Tab + HtmlEditor dinamically

    Hi Leo,

    "The Editor is inside a Panel with Collapsed=true."
    As mentioned earlier, the <ext:HtmlEditor> *may* not work as expected if it is not visible on initial page_load. By "visible", I mean, I must be able to see and click on the HtmlEditor on initial page_load.

    I tried your sample again but you're using a pretty complicated mix of <asp:UpdatePanel>'s and .ascx user controls. It's a bit difficult to determine exactly how things should be working. Can you make a simplier example which demonstrates maybe just one of the problems first?

    I'll play around some more with your code to try and determine how it should work, although the issue with the hidden <ext:HtmlEditor> is still probably going to be present.

    Geoffrey McGill
    Founder
Page 1 of 3 123 LastLast

Similar Threads

  1. Load Usercontrol on DesktopModule
    By Kaveh in forum 2.x Help
    Replies: 6
    Last Post: Apr 28, 2012, 5:59 AM
  2. regarding usercontrol load in runtime
    By ranjit2k99 in forum 1.x Help
    Replies: 22
    Last Post: May 30, 2011, 2:38 PM
  3. load usercontrol in viewport
    By maxdiable in forum 1.x Help
    Replies: 1
    Last Post: Jul 29, 2010, 12:01 AM
  4. Load usercontrol by AjaxEvents
    By latif in forum 1.x Help
    Replies: 4
    Last Post: Dec 15, 2009, 4:22 PM
  5. Replies: 1
    Last Post: Aug 06, 2008, 2:23 PM

Posting Permissions