Nested UpdatePanel + Tabs + Editor
Hi guys,
Sorry I haven't replied the other threads, I was involved in other parts of the project.
I was testing one scenario where I've got a Nested UpdatePanel. In fact, the second UpdatePanel is inside a User Control, but I am making it simple and put everything in one page.
It works fine when the main UpdatePanel is set to UpdateMode="Always", but it is exactly what I am trying to avoid, once I just need to refresh the content inside the tab where my UC is placed.
I am not sure the problem is because it is in a Nested UpdatePanel or is something I am doing wrong, but I'll use a similar sample I posted before, just to keep the sample as similar as possible of my real situation.
The sample uses a Datasource already sent here:
http://forums.ext.net/showthread.php?postid=682.aspx
Code:
<%@ 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)
ChangeTrStyle(false);
}
private void ChangeTrStyle(Boolean type)
{
if (type)
{
trList.Visible = false;
trDetail.Visible = true;
}
else
{
trList.Visible = true;
trDetail.Visible = false;
}
}
protected void GridView1_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Trim().Equals("Select"))
{
GridViewRow row = (GridViewRow)((Control)e.CommandSource).NamingContainer;
this.Label2.Text = "id: " + GridView1.DataKeys[row.RowIndex].Values["id"].ToString();
this.lblDescription.Text = "Description: " + GridView1.DataKeys[row.RowIndex].Values["a"].ToString();
ChangeTrStyle(true);
}
}
protected void GridView2_RowCommand(object sender, GridViewCommandEventArgs e)
{
if (e.CommandName.Trim().Equals("Select"))
{
GridViewRow row = (GridViewRow)((Control)e.CommandSource).NamingContainer;
HtmlEditor1.Text = "RowCommand on id: " + GridView1.DataKeys[row.RowIndex].Values["id"].ToString();
HtmlEditor2.Text = "You clicked on GridView2: " + GridView1.DataKeys[row.RowIndex].Values["a"].ToString();
}
}
protected void Button1_Click(object sender, EventArgs e)
{
this.lblMessage.Text = DateTime.Now.ToLongTimeString();
}
</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</title>
</head>
<body>
<p>
<a href="CooliteEditorTest.aspx">Reload</a></p>
<form id="form1" runat="server">
<ext:ScriptManager ID="ScriptManager1" runat="server" StateProvider="None" />
<asp:ScriptManager ID="ScriptManager3" runat="server" />
<asp:Label ID="lblMessage" runat="server" />
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView1" EventName="RowCommand" />
</Triggers>
<ContentTemplate>
<div runat="server" id="trList" visible="false" enableviewstate="true">
<h2>
List</h2>
<asp:GridView ID="GridView1" runat="server" OnRowCommand="GridView1_RowCommand" DataKeyNames="id, a"
DataSourceID="DataSource1">
<Columns>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate>
<asp:Button ID="imgEdit" runat="server" CommandName="Select" Text="Select" ImageUrl="~/images/edit.gif"
CommandArgument='<%# Bind("id") %>' ToolTip="Select" CausesValidation="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<div id="trDetail" runat="server" visible="true" enableviewstate="true">
<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">
<Content>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<Triggers>
<asp:AsyncPostBackTrigger ControlID="GridView2" EventName="RowCommand" />
</Triggers>
<ContentTemplate>
<div runat="server" id="Div1" visible="true">
<h2>
List 2</h2>
<asp:GridView ID="GridView2" runat="server" OnRowCommand="GridView2_RowCommand" DataKeyNames="id, a"
DataSourceID="DataSource1">
<Columns>
<asp:TemplateField ItemStyle-Width="2%">
<ItemTemplate>
<asp:Button ID="imgEdit" runat="server" CommandName="Select" Text="Select" ImageUrl="~/images/edit.gif"
CommandArgument='<%# Bind("id") %>' ToolTip="Select" CausesValidation="false" />
</ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
<br />
<ext:HtmlEditor ID="HtmlEditor1" runat="server">
</ext:HtmlEditor>
<br />
<ext:HtmlEditor ID="HtmlEditor2" runat="server">
</ext:HtmlEditor>
<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" />
</ContentTemplate>
</asp:UpdatePanel>
<asp:ObjectDataSource ID="DataSource1" runat="server" TypeName="DataSource" SelectMethod="Select"
UpdateMethod="Update" DeleteMethod="Delete" />
</form>
</body>
</html>
The error is causing is: Microsoft JScript runtime error: 'Ext.fly(...)' is null or not an object
Any help would be very appreciated.
Leo.
RE: Nested UpdatePanel + Tabs + Editor
Dear Coolite team,
I've seen many posts now about some issues/incompatibilities with UpdatePanel and Coolite controls. I really look forward to this <AjaxEvents> feature. Is it scheduled?
Then I can get rid of the UpdatePanels in my project.
Thanks.
Leo.
RE: Nested UpdatePanel + Tabs + Editor
Hi Leo,
I'm currently working on another round of revisions to the <asp:UpdatePanel> support within the Toolkit. The following thread is tracking recent issues with UpdateMode="Conditional", see http://forums.ext.net/showthread.php...1085-16-1.aspx
I'm confident the UpdatePanel issues will be resolved, but it just takes time, testing and user feedback. The "new and improved" UpdatePanel support will included with v0.6.
