Things to be considered while adding Tab Panel control from code behind.

Ajax Control toolkit provides Ajax Tab Container control to display the content in tabs. If you want to display the content in different tabs you just drag and drop a Ajax Tab Container control to your page and add as many tab panels as you need in the page.

Example

<cc1:TabContainer ID="TabContainer1" runat="server" CssClass="ajax__myTab">
                <cc1:TabPanel ID="Tab1" runat="server" TabIndex="0">
                    <HeaderTemplate>
           <asp:Label ID="lblTabHeader1" runat="server" Text="TabHeader1"></asp:Label>
                    </HeaderTemplate>
                    <ContentTemplate>
                                     <%--Content of Tab1--%>
                    </ContentTemplate>
                </cc1:TabPanel>
                <cc1:TabPanel ID="Tab2" runat="server" TabIndex="1">
                    <HeaderTemplate>
       <asp:Label ID="lblTabHeader2" runat="server" Text="TabHeader2"></asp:Label>
                    </HeaderTemplate>
                    <ContentTemplate>
                                     <%--Content of Tab2--%>
                    </ContentTemplate>
                </cc1:TabPanel>

</cc1:TabContainer>

But While creating Tab Panels or adding Tab Panels dynamically to the Tab Container there is a problem.

If inside Tab Container you have not created any Tab Panel in aspx page and then you try to create the tab panel dynamically and add it to the Tab Container control it will not add.

The Tab Container Control needs at least one Tab Panel inside it and for further tabs you can add dynamically. So don't forget to add one Tab Panel to the Tab Container in aspx page and subsequent tabs you can add from code behind while creating tab panel dynamically.

<cc1:TabContainer ID="TabContainer1" runat="server" CssClass="ajax__myTab">
<%--At least one tab Panel you have to add --%>
<cc1:TabPanel ID="Tab1" runat="server" TabIndex="0">
            <HeaderTemplate>
             <asp:Label ID="lblTabHeader1" runat="server" Text="Test1"></asp:Label>
            </HeaderTemplate>
            <ContentTemplate>
                   <%--Content of Tab1--%>
        </ContentTemplate>
         </cc1:TabPanel>
</cc1:TabContainer>

Related Tags:
ASP.NET, Tab Panel

Author: Bibhuti Chanda

Back to Top

Software Technology Tips

ASP.NET

Let us Connect!