vijay

welcome Netizen

Share Your Knowledge.It is a way to achieve immortality

Thursday, January 26, 2012

Customize Ajax Tab container in ASP.Net


Introduction:

Ajax tab container has power full tool, it makes ease our needs. By using this tool we can accomplish everything on as single page.
Description:
Ajax tab container contains three main tag, tab container, tab panel, content template…Tab container is main tag if want more tab, we need to increase the tab panel. Once you refer the structure it’s easy to observe tab tool.

For apply css toAjax Tab container try this below link........

Tab container properties:

·         ActiveTabIndex - The first tab to show
·         Height - sets the height of the body of the tabs.
·         Width - sets the width of the body of the tabs
·         ScrollBars - Whether to display scrollbars in the body of the TabContainer
·         TabStripPlacement - Whether to render the tabs on top of the container or below (Top, Bottom)
·         Enabled - Whether to display the Tab for the Tab Panel by default.
·         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

Tab container structure:
<div>
        <asp:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
        </asp:ToolkitScriptManager>
        <asp:TabContainer ID="Tabcont" runat="server" ActiveTabIndex="0" Width="300px" CssClass="Tabcss">
            
            <asp:TabPanel runat="server" HeaderText="Recent Items" ID="TabPanel1">
                <ContentTemplate>
                    <asp:RadioButtonList ID="RadioButtonList1" runat="server">
                        <asp:ListItem>Creating  ajax tab panel</asp:ListItem>
                        <asp:ListItem>Loading grd view</asp:ListItem>
                        <asp:ListItem>Deleting grid view</asp:ListItem>
                    </asp:RadioButtonList>
                </ContentTemplate>
            </asp:TabPanel>
            
            <asp:TabPanel runat="server" HeaderText="Mostviewed" ID="TabPanel2">
                <ContentTemplate>
                    <asp:RadioButtonList ID="RadioButtonList2" runat="server">
                        <asp:ListItem>Creating slide show</asp:ListItem>
                        <asp:ListItem>Ajax article</asp:ListItem>
                    </asp:RadioButtonList>
                </ContentTemplate>
            </asp:TabPanel>
        </asp:TabContainer>
    </div>





I
For apply css toAjax Tab container try this below link........
http://www.dotnetcode.in/2012/01/apply-css-style-for-ajax-tab-container.html.

0 comments:

Post a Comment