Wednesday, November 7, 2012

TabContainer Example – Ajax ToolKit Control

 

TabContainer :

To present tabbed UI , TabControl can be used.If you have a page that has  lot of content to present then we can break it into tabs.TabContainer contains many TabPanels each of which represents a tab.

Important attributes of TabContainer control are :

OnActiveTabChanged : This event is fired when active (current ) tab is changed.It is a server side event.
OnClientActiveTabChanged : It is also fired when current tab is changed.It is client side event. we need to write javascript for this.
Scrollbar : used to specify alignment of Scrollbar for tab container.It takes Horizontal , vertical , both , none and auto values.

TabPanel :

TabPanel has HeaderTemplate and Content Template.Header Template is optional and can be used to specify header.
We can use either HeaderTemplate or HeaderText attribute to specify header for a tab.
All the content under a tab should be specified within ContentTemplate tag.

TabContainer Example :

This example shows how to create tabs using TabContainer control. We can also write some events when tabs are changed which I will illustrate in next example.

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabContainer.aspx.cs" Inherits="Ajax_Controls_Examples_TabContainer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TAB CONTAINER EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>

        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ScrollBars="Horizontal" >
           
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate >Tab1</HeaderTemplate>
                <ContentTemplate>Content of Tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel  ID="TabPanel2" runat="server">
                <HeaderTemplate >Tab2</HeaderTemplate>
                <ContentTemplate>Content of Tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel  ID="TabPanel3" runat="server">
                <HeaderTemplate >Tab3</HeaderTemplate>
                <ContentTemplate>Content of Tab3</ContentTemplate>
            </ajaxToolkit:TabPanel>

            <ajaxToolkit:TabPanel  ID="TabPanel4" runat="server">
                <HeaderTemplate >Tab4</HeaderTemplate>
                <ContentTemplate>Content of Tab4</ContentTemplate>
            </ajaxToolkit:TabPanel>

        </ajaxToolkit:TabContainer>
    </div>
    </form>
</body>
</html>

Output:

TabContainer_1             TabContainer_2 

Another TabContainer Example with events when tab is changed . For this we need to make use of “OnActiveTabChanged” or “OnClientActiveTabChaned” event of this control.

Aspx Code :

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="TabContainer.aspx.cs" Inherits="Ajax_Controls_Examples_TabContainer" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>TAB CONTAINER EXAMPLE</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>
        <ajaxToolkit:ToolkitScriptManager ID="Sc1" runat="server">
        </ajaxToolkit:ToolkitScriptManager>
       <asp:Label ID="lblMsg" runat="server" Font-Bold="True" ForeColor="Red"></asp:Label>
        <br />        <br />
        <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ScrollBars="Horizontal"
            OnActiveTabChanged ="TabChanged_Event" AutoPostBack="true">
            <ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
                <HeaderTemplate >Tab1</HeaderTemplate>
                <ContentTemplate>Content of Tab1</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel  ID="TabPanel2" runat="server">
                <HeaderTemplate >Tab2</HeaderTemplate>
                <ContentTemplate>Content of Tab2</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel  ID="TabPanel3" runat="server">
                <HeaderTemplate >Tab3</HeaderTemplate>
                <ContentTemplate>Content of Tab3</ContentTemplate>
            </ajaxToolkit:TabPanel>
            <ajaxToolkit:TabPanel  ID="TabPanel4" runat="server">
                <HeaderTemplate >Tab4</HeaderTemplate>
                <ContentTemplate>Content of Tab4</ContentTemplate>
            </ajaxToolkit:TabPanel>
        </ajaxToolkit:TabContainer>
    </div>
    </form>
</body>
</html>

Code Behind:

using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.UI;
using System.Web.UI.WebControls;

public partial class Ajax_Controls_Examples_TabContainer : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {

    }
    protected void TabChanged_Event(object sender, EventArgs e)
    {
        lblMsg.Text = "TAB CHANGED";

    }
}

Output :

TabContainer_1                TabContainer_3

Posted by at
Labels:

No comments:

Post a Comment

Subscribe to: Post Comments (Atom)