Nested UpdatePanel + Tabs + Editor

  1. #1

    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

    <%@ 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.
    Last edited by geoffrey.mcgill; Feb 22, 2011 at 3:25 AM.
  2. #2

    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.
  3. #3

    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.
    Geoffrey McGill
    Founder

Similar Threads

  1. [CLOSED] Move tabs Tabs Style Google Chrome
    By majunior in forum 1.x Legacy Premium Help
    Replies: 7
    Last Post: Apr 30, 2013, 1:58 PM
  2. [CLOSED] Nested data in nested grids
    By FAS in forum 1.x Legacy Premium Help
    Replies: 16
    Last Post: Apr 19, 2012, 8:51 PM
  3. [CLOSED] Label Editor ComboBox Jumps to left when Editor activated
    By IanPearce in forum 1.x Legacy Premium Help
    Replies: 4
    Last Post: Sep 19, 2011, 2:31 PM
  4. [CLOSED] Bind editor to nested class collection
    By jpadgett in forum 1.x Legacy Premium Help
    Replies: 2
    Last Post: May 02, 2011, 8:21 PM
  5. Enable/Disable Tabs within UpdatePanel
    By ljcorreia in forum 1.x Help
    Replies: 10
    Last Post: Aug 27, 2009, 8:42 AM

Posting Permissions