TabPanel inside UpdatePanel - fails
*NEW - Coolite Toolkit Version 0.7 now available for DOWNLOAD. See also Examples Explorer.
 

Coolite Forums

Welcome Guest ( Login | Register )
 
TabPanel inside UpdatePanel - fails
Subscribe
Last Login: Today @ 4:23:18 AM
Posts: 648,
Posted 8/5/2008 1:33:25 PM

Group: Coolite Premium Member & Early Adopter
Hello,

A little difficult to explain, but here is my example:


<script runat="server">
    protected void btnTest_Click(object sender, EventArgs e)
    {
        lblTest.Text = "Clicked!";
    }
</script>
            <ExtJS:ViewPort runat="server" AutoHeight="True" AutoWidth="True" MonitorResize="True" Stateful="True">
                <Content>
                    <ExtJS:BorderLayout runat="server" RenderHidden="True">
                        <Center Collapsible="False" CollapseMode="Mini" Split="True" MinWidth="825">
                            <ExtJS:Panel runat="server" AutoScroll="True" AutoWidth="True" Border="True">
                                <Content>
                                    <asp:UpdatePanel runat="server">
                                        <ContentTemplate>
                                            <ExtJS:TabPanel ID="tabsCustomer" runat="server" ActiveTab="0" AutoHeight="True" AutoWidth="True">
                                                <Tabs>
                                                    <ExtJS:Tab ID="tabCustomerSearch" runat="server" Title="Customer Search" AutoHeight="True" AutoWidth="True">
                                                        <Content>
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            Word<br />
                                                            <asp:UpdatePanel runat="server" UpdateMode="Conditional">
                                                                <ContentTemplate>
                                                                    <asp:Label ID="lblTest" runat="server" Text="Nothing" />
                                                                    <asp:Button ID="btnTest" runat="server" Text="Test" onclick="btnTest_Click" />
                                                                </ContentTemplate>
                                                            </asp:UpdatePanel>
                                                        </Content>
                                                    </ExtJS:Tab>
                                                </Tabs>
                                            </ExtJS:TabPanel>
                                        </ContentTemplate>
                                    </asp:UpdatePanel>
                                </Content>
                            </ExtJS:Panel>
                        </Center>
                    </ExtJS:BorderLayout>
                </Content>
            </ExtJS:ViewPort>


When the button is clicked, it scrolls to the top of the TabPanel again.

However, remove the UpdatePanel surrounding the TabPanel and it works.

Any ideas?  Very annoying in my solution

Cheers,
Timothy


----
Timothy Grant Vogelsang
tvogelsang [at] gmail [dot] com
Coolite Toolkit 0.7 SVN (Professional Edition)
Microsoft .NET Framework 2.0
Microsoft ASP.NET Ajax 1.0

Last Login: Today @ 4:05:03 AM
Posts: 1,644,
Posted 8/5/2008 5:02:13 PM

Group: Core Development Team
Hi Timothy,

This issue is related to your other UpdatePanel post. This problem is the nested UpdatePanels. The TabPanel thinks it should update itself when the inner UpdatePanel is clicked. We're working on a fix so the controls can determine which UpdatePanel triggered the callback. Hopefully a fix will be available shortly, although it's once again a very tricky problem to solve.

Related to this... we're also almost complete our new <AjaxEvents> feature, which will probably help avoid having to use UpdatePanels at all. An AjaxEvent can be attached to anything on the Page, including <asp:Button> controls. Attaching an AjaxEvent to a <asp:Button> will trigger an async postback (ajax request, callback) to the server.

I'll keep you updated with our progress.
--
Geoffrey McGill
Coolite Inc.
Development Team
Coolite Examples | Coolite API Docs | ExtJS API Docs
twitter [coolite | personal]
« Prev Topic | Next Topic »
Reading This Topic
Active Users: 0 ( 0 guests, 0 members, 0 anonymous members )
No members currently viewing this topic.
All times are GMT -8:00, Time now is 4:37am