In this article I will explain what are ASP.NET AJAX TabContainer and TabPanel with Example?
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.
TabContainer
layout provides option to set TabPanels at top, topright, bottom, bottomright.
TabContainer also provides option to set TabPanels at left, leftbottom, right
and rightbottom by setting UseVerticalStripPlacement to true.
Tabs
can be loaded all at one time or on demand. Each tab provides functionality to
load tab in three different modes - always, once or none.
Tab can
be accessed by keyboard. After focus is set on the tab container then you can
navigate to different tabs by using the left and right arrow keys. When tabs
are displayed vertically then Up and Down arrow keys can be used to navigate
from tab to tab.
I have
one web page that page contains lot of information about user like user profile
details, job details and new user registration details because of those huge
controls and data I was unable to maintain the webpage effectively.
At that
time I decided to use Ajax Tabcontainer to use web page space effectively. Tab
container contains set of tabs that can be used to organize the page content.
Tab Container is a host for number of TabPanels. Each TabPanel defines its
HeaderText or HeaderTemplate as well as a ContentTemplate that defines its
content.
One
more thing don't hesitate to learn the post completely after seen the length of
the post because it's huge for looking but nothing is there just design only
the page contains 3 TabPanels that's why code is more and it's very easy to
work with TabContainer
Now we
can see how we can use ajax tab container in our application First add AjaxControlToolkit
reference to your application and add
<%@ Register Namespace="AjaxControlToolkit" Assembly="AjaxControlToolkit"
tagPrefix="
ajaxToolkit " %>
To your
aspx page and design your page likes this
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td height="500" valign="top"
bgcolor="#ffffff">
<table width="100%" border="0"
cellspacing="0" cellpadding="0">
<tr>
<td align="left">
<ajaxToolkit:TabContainer
ID="tcSchoolLevelDetails" runat="server"
AutoPostBack="false"
Width="80%" ActiveTabIndex="0">
<ajaxToolkit:TabPanel runat="server"
ID="TabPanel" HeaderText="Class Sections">
<ContentTemplate>
<asp:GridView ID="gvTabPanel" runat="server"
AutoGenerateColumns="False" Width="100%">
<FooterStyle
HorizontalAlign="Center" VerticalAlign="Middle"
CssClass="gridbluerow" Height="10px"/>
<HeaderStyle
CssClass="gridbluerow" Height="10px"/>
<RowStyle
HorizontalAlign="Center" VerticalAlign="Middle"
CssClass="gridgrayrow" Height="10px"/>
</asp:GridView>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server"
ID="TabPanel2" HeaderText="Class Subjects">
<ContentTemplate>
<asp:GridView ID="gvTabPanel2" runat="server"
AutoGenerateColumns="False">
<HeaderStyle
CssClass="gridbluerow" Height="10px"/>
<RowStyle HorizontalAlign="Center"
VerticalAlign="Middle" CssClass="gridgrayrow"
Height="10px"/>
<EditRowStyle
HorizontalAlign="Center" VerticalAlign="Middle"
CssClass="gridbluerow" Height="10px"/>
<FooterStyle HorizontalAlign="Center"
VerticalAlign="Middle" CssClass="gridbluerow"
Height="10px"/>
</asp:GridView>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel runat="server"
ID="TabPanel3" HeaderText="Class Exams">
<ContentTemplate>
<asp:GridView ID="gvTabPanel3" runat="server"
AutoGenerateColumns="False">
<HeaderStyle
CssClass="gridbluerow" Height="10px"/>
<RowStyle HorizontalAlign="Center"
VerticalAlign="Middle" CssClass="gridgrayrow"
Height="10px"/>
<EditRowStyle HorizontalAlign="Center"
VerticalAlign="Middle" CssClass="gridbluerow"
Height="10px"/>
<FooterStyle HorizontalAlign="Center"
VerticalAlign="Middle" CssClass="gridbluerow"
Height="10px"/>
</asp:GridView>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</td>
</tr>
</table>
</td>
</tr>
</table>
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. See the Tabs Theming section for more
details.
- 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
- TabStripPlacement - Whether to render
the tabs on top of the container or below (Top, Bottom)
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
No comments:
Post a Comment