Tabs Demonstration
The following user profile is presented in Tab format. You can click on the tab and modify specific fields.

Toolkit User Profile:
Signature and BioEmailControls
Signature:
Bio:


Hit Save to cause a postback from an update panel inside the tab panel.



Current Tab: Signature and Bio
Tabs Description

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

Tabs Properties

The control above is initialized with this code. The italic properties are optional:

<ajaxToolkit:TabContainer runat="server" 
        OnClientActiveTabChanged="ClientFunction" 
        Height="150px">
    <ajaxToolkit:TabPanel runat="server" 
        HeaderText="Signature and Bio"
        <ContentTemplate>
            ...
        </ContentTemplate>
    />
</ajaxToolkit:TabContainer>
TabContainer Properties
  • ActiveTabChanged (Event) - Fired on the server side when a tab is changed after a postback
  • OnClientActiveTabChanged - The name of a javascript function to attach to the client-side tabChanged event
  • CssClass - A css class override used to define a custom look and feel for the tabs
  • ActiveTabIndex - The first tab to show
  • Height - sets the height of the body of the tabs (does not include the TabPanel headers)
  • Width - sets the width of the body of the tabs
  • ScrollBars - Whether to display scrollbars (None, Horizontal, Vertical, Both, Auto) in the body of the TabContainer
TabPanel Properties
  • Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client.
  • OnClientClick - The name of a javascript function to attach to the client-side click event of the tab.
  • HeaderText - The text to display in the Tab
  • HeaderTemplate - A TemplateInstance.Single ITemplate to use to render the header
  • ContentTemplate - A TemplateInstance.Single ITemplate to use to render the body
Copyright © 2006-2007 Microsoft Corporation. All Rights Reserved.