Aug 15, 2008, 9:51 AM
[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" onclick="BtnBack_Click" />
</Content>
</ext:Panel>
</ContentTemplate>
</asp:UpdatePanel>
</form>
</body>
</html><%@ 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>Leo.
