Question

Having a strange issue with the TabContainer in the AJAX Toolkit.

We have several views into a customer record system that we have built as ASP.net controls. These controls use UpdatePanels to load data asynchronously. We use jQuery and jquery.ui to place these controls in separate tabs on a single page.

Which all works swimmingly.

Lately, I’ve gotten a little tired of the jQuery tab hackish approach and decided to port everything to use the TabContainer. I want to be able to control the tabs as objects.

At first glance, everything works perfectly. I just slapped the controls into tabs in a TabContainer and everything looked great. However, for some reason, databound controls are losing their data.

For instance, grid views vanish when I switch pages. A drop down control with an OnTextChanged event, loses its databound list of values upon post back.

Something about the TabContainer -> Custom Control -> UpdatePanel -> Control that uses data binding heirarchy is throwing it out of whack and the debugger isn’t shedding any light. It seems like control state isn’t being stored.

I don’t really know enough about control state to know what to look for.

Any ideas? Here is the markup for the TabContainer:

<asp:TabContainer ID="tcBanner" runat="server" ActiveTabIndex="0" Width="100%" 
    EnableViewState="False" ScrollBars="Vertical">
    <asp:TabPanel runat="server" HeaderText="Comments" ID="tbComments">
        <ContentTemplate>
            <luBannerControl:Comments ID="commentsTabContent" runat="server" />
        </ContentTemplate>
    </asp:TabPanel>        
    <asp:TabPanel runat="server" HeaderText="General" ID="tbContact">
        <ContentTemplate>
            <luBannerControl:Contact ID="contactTabContent" runat="server" />
        </ContentTemplate>
    </asp:TabPanel>
</asp:TabContainer>

Here is the markup for one of the controls:

<asp:UpdatePanel ID="pnlComments" UpdateMode="Conditional" runat="server">
    <ContentTemplate>
        <asp:GridView ID="CommentsGridView" AllowPaging="true" PageSize="20" DataSourceID="BannerSqlDataSource" runat="server" AutoGenerateColumns="False" GridLines="None" CssClass="CommentGrid" HeaderStyle-CssClass="CommentGridHeader" RowStyle-CssClass="CommentRowsEven" AlternatingRowStyle-CssClass="CommentRowsOdd">
            <Columns>
                <asp:BoundField DataField="SPRCMNT_TEXT" HeaderText="Comment" SortExpression="SPRCMNT_TEXT" />
                <asp:BoundField DataField="SPRCMNT_DATE" HeaderText="Created" SortExpression="SPRCMNT_DATE" DataFormatString="{0:M/dd/yyyy}" />
                <asp:BoundField DataField="SPRCMNT_CMTT_CODE" HeaderText="Type" SortExpression="SPRCMNT_CMTT_CODE" />
                <asp:BoundField DataField="SPRCMNT_CTYP_CODE" HeaderText="Source" SortExpression="SPRCMNT_CTYP_CODE" />
                <asp:BoundField DataField="sprcmnt_user_id" HeaderText="User" SortExpression="sprcmnt_user_id" />
            </Columns>
        </asp:GridView>
    </ContentTemplate>
    <Triggers>
        <asp:AsyncPostBackTrigger ControlID="txtSearch" EventName="TextChanged" />
        <asp:AsyncPostBackTrigger ControlID="btnClearFilter" EventName="Click" />
    </Triggers>
</asp:UpdatePanel>

Answer 1

This ended up being completely unrelated to nested TabContainers.

I had unknowingly broken the controls in question before adding them to the TabContainer and surprisingly, this meant they did not function the way they used to.

Sorry for wasting your collective time.

Thanks,
Clif