Lions Den

The Code and Times of Hanan Schwartzberg

About Hanan | Hanan's CV | Contact Hanan

August 12, 2009

Default a TabContainer to No Tabs Selected

Question

Under normal circumstances when a page loads with a tabContainer on it one tab must be selected. The selected tab can be specified via the ActiveTabIndex property. What if the tabContainer needs to default to an empty tab with none of the tabs selected?

Solution

Add a dummy tabPanel to the tabContainer and leave it blank. Use the pageLoad JavaScript function to hide the tab’s header

<cc1:TabContainer ID="TabContainer1" runat="server" 
    Height="200px" Width="200px" ActiveTabIndex="0">
    <cc1:TabPanel runat="server" ID="tpDummy" HeaderText="">
        <ContentTemplate>
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel runat="server" ID="tpName" HeaderText="Name">
        <ContentTemplate>
            Name:
            <asp:TextBox runat="server" ID="txtName" />
        </ContentTemplate>
    </cc1:TabPanel>
    <cc1:TabPanel runat="server" ID="tpEmail" HeaderText="Email">
        <ContentTemplate>
            Email:
            <asp:TextBox runat="server" ID="txtEmail" />
        </ContentTemplate>
    </cc1:TabPanel>
</cc1:TabContainer>
function pageLoad(sender, e)
{
    var objTpDummy = 
        document.getElementById('<%= tpDummy.ClientID %>' + '_tab');
    objTpDummy.style.display = 'none';
}
Home | Site Design | Banner Design | Code Den | Offsite Posts | Downloads | Photography | About Hanan | Hanan's CV | Contact Hanan
Copyright © 2009 Hanan Schwartzberg. All rights reserved.