Geeks With Blogs

News
Steve Clements .Net and then some....
I love using a nice little tab control on my web pages but I never seem to find an good solution…well a FREE (!) one anyway! There are some great tab controls out there to buy but I have never really looked at them as paying for controls is not in my vocabulary.
This little control is probably no match for one of those but for a simple and FREE solution look no further!

The problem I have with the current solutions I use are
1. The javascript and CSS solution using relative positioning and the visibility style attribute has the advantage of being nice for the user to use but depending on the number of tabs and what is on the tab it’s a pretty big overhead on the page to have all tabs there….just hidden.

2. asp.net has a great control called the Multiview control, which only renders the active view of this control, keeping the size of the page to a minimum but with the problem of a full page postback. Which for a tab control is pretty not a nice experience.

So we merge the Atlas update panel with the asp.net 2.0 Multiview control, some HTML tables and we have a nice tab control. There are limitations to this control, one being that the tabs have to added to the .ascx file HTML markup manually.

The Code


The tab control is contained within a .ascx files, which encapsulates the markup, script and properties for the control.
The tabs are simple done using CSS, HTML and Javascript(just to give a little hover affect).

<div id="tabs" style ="text-align: left; padding: 4px 0px 0px 0px; color: Black;">

        < table cellspacing="0" cellpadding="0" style="width: 100%">

            <tr>

                <td class="spacer">

                     td>

                <td class="tabactive" id="tab1" onmouseover="return tab_OnMouseOver(this)" onmouseout="return tab_OnMouseOut(this);">

                     

                    <asp:LinkButton CssClass="tabbtn" runat="server" ID="btnTab1" Width="90" OnClientClick="return tab_activate('tab1');"

                        CommandArgument="0" OnCommand="btnTabs_Command"<asp:LinkButton>

                <td>

The content section of the tab control is an updatepanel with the MultiView control inside.

<div id="content" style="margin: 10px 2px 2px 2px; text-align: left; color: Black;

        overflow: auto; height: 100%; width: 100%;">

        <atlas:UpdatePanel ID="UpdatePanelContent" runat="server" Mode="conditional">

            <ContentTemplate>

                <asp:MultiView ID="MultiViewContent" runat="server" ActiveViewIndex="0" Visible="true">

                    <asp:View ID="View1" runat="server">

                        <asp:PlaceHolder ID="PlaceHolder1" runat="server"<asp:PlaceHolder>

                    <asp:View>

I have used the ITemplate interface for the content of each tab, the may be new to some people so take a look at the code and download the project for a better look.

private ITemplate _view1;

 

[PersistenceMode(PersistenceMode.InnerProperty), TemplateContainer(typeof(TemplateControl))]

public ITemplate Tab1

{

    get { return _view1; }

    set { _view1 = value; }
}

 

Each tab has a link button and the Text property is exposed.
 

#region Link Button Text Property Accessors

 

    public string Tab1Title

    {

        get { return btnTab1.Text; }

        set { btnTab1.Text = value; }

    }

The Link button Command event is handled, this is tidyer than using 5 click events, i have set the commandargument of each button to the tab number.

This event is sent to the calling webform as a new event for this control...TabChanged, which also has the CammandEventArgs as a parameter, this enables you to perform tab spefic binding for a each of the tabs on the webform.

// Delegate to represent TabChanged event signature.

public delegate void TabChangedEventHandler(object sender, CommandEventArgs e);

 

// Event using the above handler.

public event TabChangedEventHandler TabChanged;

 

#region Tab Command

 

protected void btnTabs_Command(object sender, CommandEventArgs e)

{

    // Change ActiveViewIndex for MulitView control.

    MultiViewContent.ActiveViewIndex = Convert.ToInt32(e.CommandArgument);

 

    if (TabChanged != null) {

        // TabChanged..send event to calling webform.

        TabChanged(this, e);

    }

}

 

#endregion

On the calling webform handle the TabChanged event and perform specific tab actions to do whatever is required.  In this example you can see i have a GridView on tab 5 that i only bind when tab 5 is selected

// Event handler for tabs changed

protected void TabsView1_OnTabChanged(object sender, CommandEventArgs e)

{

     switch (Convert.ToInt32(e.CommandArgument)) {

 

     case 0:

           Label lbl = (Label)TabsView1.Tab1Controls.FindControl("label2");

           lbl.Text = e.CommandArgument.ToString();

           break

     case 4:

           BindGridOnTab5();

           break

    }

}

 

void BindGridOnTab5()

{

    System.Collections.ArrayList al = new System.Collections.ArrayList();

    al.Add(new ListItem("Steve Clements Blog", "http://geekswithblogs.net/steveclements"));

    al.Add(new ListItem("asp.net", "http://www.asp.net"));

    al.Add(new ListItem("Atlas", "http://atlas.asp.net"));

 

    GridView grid = (GridView)TabsView1.Tab5Controls.FindControl("grdTab5");

    if (grid != null) {

        grid.DataSource = al;

        grid.DataBind();

    }

}

Finished article look a little like this....

TabControl_sg

Download the code from here.

Hopefully you have learnt a few things from this post, and enjoy playing/enhancing this simple control for your own pages.

Steve

Posted on Sunday, August 27, 2006 8:04 AM | Back to top


Comments on this post: Simple Atlas Tab Control

# re: Simple Atlas Tab Control
Requesting Gravatar...
Hello steve..

this is a useful control.. thanks for the code.. but I have a little problem when I try to see it in design mode.. appears this message:

Error creating Control: TabsView2
Type 'System.Web.UI.UserControl' does not have
a public property named tab1.. what i did wrong??... Thank you in advance
Left by Manuel Cota on Sep 25, 2006 8:13 PM

# re: Simple Atlas Tab Control
Requesting Gravatar...
Hello steve..

this is a useful control.. thanks for the code.. but I have a little problem when I try to see it in design mode.. appears this message:

Error creating Control: TabsView2
Type 'System.Web.UI.UserControl' does not have
a public property named tab1.. what i did wrong??... Thank you in advance
Left by Manuel Cota on Sep 25, 2006 8:13 PM

# re: Simple Atlas Tab Control
Requesting Gravatar...
Hi Manuel

Not sure why but when using ITemplate interface it doesnt have design time rendering.
Left by Steve on Sep 26, 2006 2:46 PM

# re: Simple Atlas Tab Control
Requesting Gravatar...

Not sure why but when using ITemplate interface it doesnt have design time rendering.
Not sure why but when using ITemplate interface it doesnt have design time rendering.
Left by Not sure why but when using ITe on Sep 22, 2007 2:12 AM

# re: Simple Atlas Tab Control
Requesting Gravatar...
Its because the ITemplate and controls within dont belong to the page's control collection. They belong to the control collection of the control so its 1 level to low for the design time compiler to render them. :(
Left by Steve Clements on Sep 22, 2007 8:15 AM

Your comment:
 (will show your gravatar)


Copyright © Steve Clements | Powered by: GeeksWithBlogs.net