ASP.NET AJAX TabContainer – Tips and Tricks

Posted by: Suprotim Agarwal , on 7/23/2008, in Category ASP.NET AJAX
Views: 592536
Abstract: An ASP.NET AJAX TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. You can place your controls inside each TabPanel. In this article, we will explore some common tips and tricks with the ASP.NET AJAX TabContainer control.
ASP.NET AJAX TabContainer – Tips and Tricks
 
An ASP.NET AJAX TabContainer creates a set of Tabs that can be used to save screen space and organize content. The TabContainer contains a number of TabPanel controls. You can place your controls inside each TabPanel. In this article, we will explore some common tips and tricks with the ASP.NET AJAX TabContainer control.
I assume you have some basic experience developing ASP.NET AJAX applications and have installed the ASP.NET AJAX Library and ASP.NET Control Toolkit. As of this writing, the toolkit version is Version 1.0.20229 (if you are targeting Framework 2.0, ASP.NET AJAX 1.0 and Visual Studio 2005) and Version 3.0.20229 (if targeting .NET Framework 3.5 and Visual Studio 2008).
All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).
Tip 1: How to Create a ASP.NET AJAX TabContainer with Tab Panels
Assuming you have AJAX Control Toolkit for 3.5 installed, Open Visual Studio 2008 > File > New Website > ‘ASP.NET WebSite’ > Enter a name and location for the project > Click Ok.
Drag and drop a <ScriptManager> from the Toolbox to the page. Now drag and drop a TabContainer to the page and using the smart tag, add a few tabpanels. Switch to the source view and add <ContentTemplates> inside each TabPanel. You can now place controls inside the <ContentTemplates>. The code will look similar to the following:
<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
 
<%@ Register assembly="AjaxControlToolkit" namespace="AjaxControlToolkit" tagprefix="cc1" %>
 
<!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 Tips & Tricks</title>
</head>
<body>
    <form id="form1" runat="server">
    <div>   
        <asp:ScriptManager ID="ScriptManager1" runat="server">
        </asp:ScriptManager>
   
        <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
       
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button1" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
           
            <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button2" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
                      
            <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox3" runat="server"></asp:TextBox><br />
                    <asp:Button ID="Button3" runat="server" Text="Button" />
                </ContentTemplate>
            </cc1:TabPanel>
           
        </cc1:TabContainer>
        <br />
   
    </div>
    </form>
</body>
</html>
 
Tip 2: How to loop through all the controls in an ASP.NET AJAX TabContainer
In Tip 1, we had kept some textboxes and buttons in the TabPanels. Now if you want to loop through the entire TabContainer and fetch the values of these textboxes, use the code demonstrated below.
C#
    protected void btnLoop_Click(object sender, EventArgs e)
    {
        AjaxControlToolkit.TabContainer container = (AjaxControlToolkit.TabContainer)TabContainer1;
        foreach (object obj in container.Controls)
        {
            if (obj is AjaxControlToolkit.TabPanel)
            {
                AjaxControlToolkit.TabPanel tabPanel = (AjaxControlToolkit.TabPanel)obj;
                foreach (object ctrl in tabPanel.Controls)
                {
                    if (ctrl is Control)
                    {
                        Control c = (Control)ctrl;
                        foreach (object innerCtrl in c.Controls)
                        {
                            if (innerCtrl is System.Web.UI.WebControls.TextBox)
                                Response.Write(((TextBox)innerCtrl).Text);
                        }
                    }
                }
            }
        }
 
    }
VB.NET
      Protected Sub btnLoop_Click(ByVal sender As Object, ByVal e As EventArgs)
            Dim container As AjaxControlToolkit.TabContainer = CType(TabContainer1, AjaxControlToolkit.TabContainer)
            For Each obj As Object In container.Controls
                  If TypeOf obj Is AjaxControlToolkit.TabPanel Then
                        Dim tabPanel As AjaxControlToolkit.TabPanel = CType(obj, AjaxControlToolkit.TabPanel)
                        For Each ctrl As Object In tabPanel.Controls
                              If TypeOf ctrl Is Control Then
                                    Dim c As Control = CType(ctrl, Control)
                                    For Each innerCtrl As Object In c.Controls
                                          If TypeOf innerCtrl Is System.Web.UI.WebControls.TextBox Then
                                                Response.Write((CType(innerCtrl, TextBox)).Text)
                                          End If
                                    Next innerCtrl
                              End If
                        Next ctrl
                  End If
            Next obj
 
      End Sub
Similarly, you can use this logic to access any other control kept in the TabContainer. 
Tip 3: How to change the back color of an ASP.NET AJAX TabContainer/ TabPanel or How to Style an ASP.NET AJAX TabContainer
If you have tried using the BackColor property of the TabContainer, it does not work. Instead what you need to do is use CSS to change the style of the TabContainer. For example to change the Font, ForeColor and BackColor, declare the following CSS in your <head> element
<head runat="server">
    <title>Tab Container Tips & Tricks</title>
    <style type="text/css">
        .BackColorTab
        {
            font-family:Verdana, Arial, Courier New;
            font-size: 10px;
            color:Gray;
            background-color:Silver;
        }
    </style>
 
</head>
And then use this CSS in your TabContainer in the following way:
<cc1:TabContainer ID="TabContainer1" CssClass="BackColorTab" runat="server" ActiveTabIndex="2">
...
</cc1:TabContainer>
If you want to know more about styling the TabContainer, I would recommend reading this blog over here
Tip 4: How to align a TabHeader to the center in an ASP.NET AJAX TabContainer
Use CSS.
<head runat="server">
    <title>Tab Container Tips & Tricks</title>
    <style type="text/css">
        .TabHeaderCSS
        {
             font-family:Verdana, Arial, Courier New;
             font-size: 10px;
             background-color: Silver;
             text-align: center;
             cursor: pointer
        }
 
    </style>
 
</head>
<cc1:TabContainer ID="TabContainer1" CssClass="TabHeaderCSS" runat="server" ActiveTabIndex="2">
...
</cc1:TabContainer>
 
Tip 5: How to navigate through tabs using buttons in an ASP.NET AJAX TabContainer
Let us say that you want to build in a navigation system inside the TabContainer. So there are buttons on each tab and you want to move to the next tab when you click on these buttons. There are two ways you can do this:
Method 1: Use the ‘ActiveTab’ property of the TabContainer
C#
     protected void Button1_Click(object sender, EventArgs e)
    {
        // Move to Tab 2
        TabContainer1.ActiveTab = TabContainer1.Tabs[1];
    }
 
VB.NET
      Protected Sub Button1_Click(ByVal sender As Object, ByVal e As EventArgs)
            ' Move to Tab 2
            TabContainer1.ActiveTab = TabContainer1.Tabs(1)
      End Sub
However this method would cause a postback if the button is not wrapped in an UpdatePanel. If you want to avoid a postback, use Method 2.
Method 2: Replace the <asp:Button> with HTML Buttons and you can then move to the next tab with a little bit of javascript.
<head runat="server">
    <title>Tab Container Tips & Tricks</title>
    <script type="text/javascript">
    function MoveTab(num)
    {
        var container = $find('TabContainer1');
        container.set_activeTabIndex(num);
    }
    </script>
 
</head>
And add a button like the one shown below in each tab
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
                    <input id="Button1" type="button" value="Next" onclick="MoveTab(1)" />
                </ContentTemplate>
            </cc1:TabPanel>
Tip 6: How to add a Scrollbar to an ASP.NET AJAX TabContainer
If you want to automatically add a scrollbar, if the control inside a TabPanel (kept in a ASP.NET AJAX TabContainer), is greater than the width of the TabPanel, then just add a ‘Panel’ control (<asp:Panel>)  inside the Tab, set the ScrollBars="Vertical" property and drop the control inside the ‘Panel’.
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical">
                        <asp:TextBox ID="TextBox1" runat="server" Width="300px" Height="30px"></asp:TextBox><br />                  
                    </asp:Panel>
                </ContentTemplate>
            </cc1:TabPanel>
Here we have set the Width of the <TabContainer> to 200px and set the Width of the TextBox to 300px, which brings up the ScrollBar.
Tip 7: How to load the TabPanels on demand
There is an excellent post by Matt Berseth over here
Tip 8: How to add an image in the Header of each TabPanel in an ASP.NET AJAX TabContainer
Use <HeaderTemplate>.
You can then add an image as shown below:
   <cc1:TabPanel ID="TabPanel1" runat="server">
       <HeaderTemplate>
           <img src="search.jpg" alt="Tab1"/>
       </HeaderTemplate>
       <ContentTemplate>
           <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox><br />
       </ContentTemplate>
   </cc1:TabPanel>
Well those were some tips associated with the AJAX TabContainer. As future versions of the AJAX toolkit are released, we should be hopeful that there will exist easier ways, of achieving 'some' of the functionality discussed in this article. I hope this article was useful and I thank you for viewing it.
 
If you liked the article,  Subscribe to my RSS Feed. 
 

This article has been editorially reviewed by Suprotim Agarwal.

Absolutely Awesome Book on C# and .NET

C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.

We at DotNetCurry are very excited to announce The Absolutely Awesome Book on C# and .NET. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle).

Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering C# 6.0, C# 7.0 and .NET Core, with chapters on the latest .NET Core 3.0, .NET Standard and C# 8.0 (final release) too. Use these concepts to deepen your existing knowledge of C# and .NET, to have a solid grasp of the latest in C# and .NET OR to crack your next .NET Interview.

Click here to Explore the Table of Contents or Download Sample Chapters!

What Others Are Reading!
Using Script reference Profiler to Improve the Performance of an ASP.NET AJAX page

ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks

Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 Application

Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX

ASP.NET AJAX CollapsiblePanelExtender - Tips and Tricks

3 Different Ways to Display Progress in an ASP.NET AJAX Application

Was this article worth reading? Share it with fellow developers too. Thanks!
Share on LinkedIn
Share on Google+

Author
Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of DotNetCurry, DNC Magazine for Developers, SQLServerCurry and DevCurry. He has also authored a couple of books 51 Recipes using jQuery with ASP.NET Controls and The Absolutely Awesome jQuery CookBook.

Suprotim has received the prestigious Microsoft MVP award for Sixteen consecutive years. In a professional capacity, he is the CEO of A2Z Knowledge Visuals Pvt Ltd, a digital group that offers Digital Marketing and Branding services to businesses, both in a start-up and enterprise environment.

Get in touch with him on Twitter @suprotimagarwal or at LinkedIn



Page copy protected against web site content infringement by Copyscape



Feedback - Leave us some adulation, criticism and everything in between!
Comment posted by Sivaram on Wednesday, July 23, 2008 12:14 PM
Great article.I am Searching  5th Tip for long time But goit Now Thanks .Nice Post
Comment posted by krishna on Wednesday, July 23, 2008 1:26 PM
Hello Sir
I have been going through your articles and are useful for beginners like me.But one request, it would be great if you can add screens shots of same so that it would be much helpful.

Thanks
Krishna
Comment posted by Vlad on Wednesday, July 23, 2008 2:57 PM
Great article!
Would like to hear more about tab (like how to change the tabs text on the fly...)

p.s. The last paragraph has "Well those were some tips associated with the DropDownExtender.". You probably were thinking about something else :)
Comment posted by Peter on Thursday, July 24, 2008 3:58 AM
Hi there,
I have a question for you. Do you know how to disable a tab?
ajxtcEnterprise.Tabs[1].Visible = false;
and
ajxtcEnterprise.Tabs[1].Enabled = false;
does not work.

Thanks
Comment posted by Suprotim Agarwal on Thursday, July 24, 2008 12:16 PM
Krishna: I will keep your suggestion in mind

Vlad: Thanks for pointing that out. The correction has been made. I will try and explore how to change the tab text.

Peter: Try this javascript code which is to be put after the <scriptManager>.

function DisableEnableTab(var boolVal, var tabNo)
{
   var tab = $find('TabContainer1');
   if (boolVal == true)
   {
       tab.get_tabs()[tabNo].set_enabled(false);
   }
   else
   {
        tab.get_tabs()[tabNo].set_enabled(true);
   }
}

Call the code using this:
<input id="btnSomething" type="button" value="EnableDisable" onclick="return DisableEnableTab(true, 0)" />
Comment posted by don k on Tuesday, July 29, 2008 5:55 PM
Hello,
Very nice article, helps me alot.
I have a question on your Tip5 - Method 2.
Your method works good, however, as soon as I move the button outside of tabpanel, I am getting an error message.
Have you noticed this? Or is it just me?

I have a page where I want to have tabs in the main section of my page and would like to have html buttons on my navigation section and change a tab when button is clicked.

thanks
Comment posted by don k on Tuesday, July 29, 2008 6:21 PM
nevermind,
It worked. I am not sure how or why but it is working now.
All I did was placed the html buttom that was inside the tabcontainer and place it outside and it starts to work.

thanks
Comment posted by Suprotim Agarwal on Thursday, July 31, 2008 9:58 AM
Good to know that it worked for you!!
Comment posted by jobin on Sunday, August 17, 2008 2:52 AM
its a gud one.. very useful piece of codes
Comment posted by CK on Tuesday, August 26, 2008 5:38 AM
hi..

i am using ajax tab container.. and there is 5 tabpanels with some 50 textboxes in each..

i have a code to disable all the textbox but i find it is very slow in IE7. the c#.net code is fast to execute but it seems that IE7 would take some 6-8 seconds to show the changes on screen? are you experiencing this too?
Comment posted by Suprotim Agarwal on Wednesday, August 27, 2008 5:03 AM
CK: Post your code over here for me to analyze and comment upon.
Comment posted by ajay on Thursday, August 28, 2008 9:21 AM
Your article is copied by someone here,
http://dotnetbest.blogspot.com/2008/08/ajax-tabcontainer-tips-and-tricks.html

Act immedietely!!!
Comment posted by Suprotim Agarwal on Friday, August 29, 2008 2:16 PM
Ajay: Thanks for being so attentive and informing us. The site http://dotnetbest.blogspot.com/ has been sent a warning. I hope sense prevails over the owner and he removes the article, else we will have to take legal action.
Comment posted by Nirav on Tuesday, September 16, 2008 6:24 AM
Hi Suprotim
This is as usual a nice one  from yours.I had justed checked it out for learning as in near future I had to deal with it.All the things are really nice but I am not able to see scrolllbar working.I even tried  pasting your code.??
Comment posted by Suprotim Agarwal on Tuesday, September 16, 2008 9:20 AM
Nirav: I hope the control inside a TabPanel is greater than the width of the TabPanel. Also which browser did you test it on?
Comment posted by Nirav on Wednesday, September 17, 2008 6:13 AM
I had followed as per ur instructions,Here is my code
<ACTkit:TabContainer runat="server" ID="TCnr1" width="200px"   >
<ACTkit:TabPanel runat="server" ID="TabPanel1" >
  <ContentTemplate>
  <asp:Panel ID="pnl1" runat="server" ScrollBars="Vertical">
     <asp:TextBox ID="TextBox1" runat="server"  Width="350px"></asp:TextBox></asp:Panel>
                </ContentTemplate>
            </ACTkit:TabPanel>
        </ACTkit:TabContainer>


I am using IExplorer.I saw it is working in Firefox,safari,Chrome also.
But It also shows(though inactive) horizontal scroll
Comment posted by Suprotim Agarwal on Wednesday, September 17, 2008 9:45 AM
Nirav: How many tabs do you have in your app. I just rechecked the sample and I get both the horizontal as well as vertical bar. I wonder why doesn't it come up at your end. I tested it on IE7/Mozilla. Check my code:

       <cc1:TabContainer ID="TabContainer1" runat="server"  AutoPostBack="false" Width="200px">
            
            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
                <ContentTemplate>
                    <asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical">
                        <asp:TextBox ID="TextBox1" runat="server" Width="300px" Height="30px"></asp:TextBox><br />                  
                    </asp:Panel>
                </ContentTemplate>
            </cc1:TabPanel>
</cc1:TabContainer>

If there still exists an issue, I would gladly test it at my end. Do let me know. Thanks.
Comment posted by Nirav on Thursday, September 18, 2008 12:35 AM
Hi
I am really amazed such things above code of yours still does not work for me.I had tried this with one,two,and even more tabpanels.Note that I am havin IE6,can this be the reason behind it??I would have try it in IE7. One more thing when I tested your code, it worked mozilla but still it shows horizontal scrollbar(inactive) how can I remove that.Thanks for early response.
Comment posted by Vipin on Saturday, September 20, 2008 2:20 AM
Hi,

Its really great article but if you can add few more tips it really make it better.

1.With ajaxtoolkit Accesskey is not working.means when you define Accesskey="A" on tabpanel on a page which uses masterpage and if you use alt+C to reach on to the tab it doesent work.

2. if you are using tab keys to move on to your page you can not move on to different tabpanels. is there any way to do this?
Comment posted by Suprotim Agarwal on Tuesday, September 23, 2008 11:25 PM
Nirav: Seems its an IE 6 issue. Let me try it out and see if I can come up with a solution for the same.

Vipin: I don't think there is AccessKey support. You may have to capture the window keypress programmatically and then define logic above it (same for tabkeys). Check this related article of mine:

http://www.dotnetcurry.com/ShowArticle.aspx?ID=91

Once you have captured the key, in javascript do this:

var container = $find('TabContainer1');
container.set_activeTabIndex(num);

Comment posted by Aamir on Wednesday, September 24, 2008 3:42 AM
I Hve an issue, My Tab container doesn`t appear in Firefox,It Wrks fine in IE. Any Help
Comment posted by Nirav on Monday, September 29, 2008 8:58 AM
HI Suprotim
My problem is not related to Tabs.I hope you dont mind reading it here.I had to display a list of employees of a company,and to all the names(retrived from database) I want to assign links to other pages(href).I had tried to do it in listbox,bulletedList and even in "PagingBulletedList" of ajax.My page size is fix but no. of employees may vary at times so I had to use something like listbox or some scrollable item but whichone and how that I dont know.
If u r getting my problem and can suggest something then please reply soon.
Comment posted by Suprotim Agarwal on Monday, September 29, 2008 10:42 PM
Nirav: It seems you want to display Employee Name and the link would probably display other details about the employee. You can use either a Repeater (templated)/ GridView or a ListView. Choosing any of these controls entirely depends on how u r going to use it. Repeater is light weigth and gives you amazing flexibility when it comes to templating your design

Check this link for some clues:
http://msdn.microsoft.com/en-us/library/bb530322.aspx
Comment posted by Nirav on Tuesday, September 30, 2008 2:27 AM
Thanks for the valuable information.
Comment posted by Nirav on Tuesday, September 30, 2008 2:55 AM
One more difficulty here,
When I use ajax tab control,it does not allow me to write
<link href="<%= Application("sPath") %>" rel="stylesheet" type="text/css"/>
which i generally use in my aspx pages.Error is something like:
"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)."
Same is the case with script tag.When i use absolute path instead of <%= Application("sPath") %> it works fine.!!!!!
Comment posted by manish goel on Wednesday, October 15, 2008 5:13 AM
hi suprotim
i am new user of ajaxtoolkit & artical published by u is so valuable for me please publish more artical like that. these artical help me to customize the ajaxtoolkit code.

thanks

Manish
Comment posted by manish goel on Wednesday, October 15, 2008 7:16 AM
hi suprotim
i am new user of ajaxtoolkit & artical published by u is so valuable for me please publish more artical like that. these artical help me to customize the ajaxtoolkit code.

thanks

Manish
Comment posted by Suprotim Agarwal on Friday, October 17, 2008 6:43 AM
Manish: Glad to know that you liked them Manish! You can find many more AJAX articles over here

http://www.dotnetcurry.com/BrowseArticles.aspx?CatID=59
Comment posted by D K on Thursday, October 23, 2008 11:01 AM
I'm trying to change selectedtab progrmatically on page load and having some issues.  

I tried prety much everything I could think of
here are some of the things I tried (I have 2 tabs):

1) function SetActiveTab(tabControl, tabNumber)
   {          
         var ctrl1 = $find("ctl00_TabContainer1");
         ctrl1.set_activeTab(2);
   }
2) $find('<%=TabContainer1.ClientID%>').set_activeTabIndex(2);

3)var ctrl1 = document.getElementsByTagName("ctl00_TabContainer1");
ctrl1.set_activeTab(2);

4)var ctrl1 = document.getElementsByTagName("ctl00_TabContainer1_TabPanel1");
var ctrl2 = document.getElementsByTagName("ctl00_TabContainer1_TabPanel2");
ctrl1.display="none";
ctrl1.visibility="hidden";
ctrl2.display="";
ctrl1.visibility="visible";

An none of these worked.  I don't want to cause a postback in order to change the Tab.  I can't understand why wouldn't the last thing I tried work, I simply  trying to show and hide the 2 div controls.

Please help
Comment posted by Suprotim Agarwal on Wednesday, October 29, 2008 12:51 AM
D K: That's what Tip 5, Method 2 suggests. Use this code:

<head runat="server">
    <title>Tab Container Tips & Tricks</title>
    <script type="text/javascript">
        function pageLoad() {
            var container = $find('TabContainer1');

            container.set_activeTabIndex(2);
        }
    </script>
</head>
Comment posted by babu on Friday, October 31, 2008 6:12 AM
The 2nd point says about changing background-color by applying CssClass, But it is for the whole tab container, is it possible to set the tab panel color on user click using javascript. I tried to set the CssClass for activetab, but does not work.
Comment posted by anil reddy y on Monday, December 1, 2008 5:58 AM
your article is good.but you have given some knowledge about tabs control.i want to get "tabpanel id" which is in active state.there is some event "OnActiveTabChanged" is not working what i have to do.

thank you
anil
Comment posted by ravi4dotnet on Thursday, December 11, 2008 12:49 AM
Hi
    what is url REWRITING. Please give me answer with an exemple.
Comment posted by Suprotim Agarwal on Friday, December 12, 2008 12:37 PM
Anil: In javascript, you could use this:

var container = $find('TabContainer1');
var activeTab = container.get_activeTabIndex();


Ravi: UrlRewriting has been explained over here:

http://msdn.microsoft.com/en-us/library/ms972974.aspx
http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx
Comment posted by Robert Hellestrae on Tuesday, December 16, 2008 9:22 AM
Fantastic article, and I have been working with the AJAX TabContainer for several weeks!
Comment posted by Suprotim Agarwal on Tuesday, December 16, 2008 10:11 AM
Thanks Robert! Glad that you liked it.
Comment posted by Derek Brown on Monday, December 22, 2008 10:15 PM
multiple rows with ajax tabcontainer....


I found a programmatic trick to this, or at least it worked for me. What I did was add an extra tab when (tabindex-1) mod 10 = 0. set extra tab TabHeaderText = “&lt;div style=’clear:both;’&gt;”. also set extratab.visible = false. Then keep count of how many extra tabs added as RowCount. Then when finished adding all tabs, loop till RowCount and add more extra tabs with TabHeaderText = “&lt;/div&gt;”, and visible = false. works in firefox and IE7. havent tried other browsers. some code below. (tabspacer.ascx has nothing to it, besides class inherits from BaseControl, which inherits from UserControl, and shadows my BasePage. BasePage inherits Page. the aspx itself with the tabs on it inherits from BasePage.

public void AddTabs(String PageFile, int CMSAdministratorId, int WebsiteId, Boolean IsNewTabOnly)
{
int i = 0;
String sProc = “usp_sel_SomeStoreProc”;
SqlParameter[] sp = new SqlParameter[1];
sp[0] = new SqlParameter(”@Param1″, _Param1);
SqlDataReader dr = DatabaseCalls.ExecuteReader(DatabaseConnections.GetConnectionString(CMSUtility.Databases.MyDatabase), sProc, sp);
while (dr.Read())
{
i += 1;
AddTab(dr["ControlPath"].ToString(), dr["TabName"].ToString(), i);

}
dr.Close();

for (int j = 1; j <= _rowCount; j++)
{
TabPanel tp2 = new TabPanel();
tp2.HeaderText = “&lt;/div&gt;”;
tp2.ID = “TabsClose” + j.ToString();
tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”;
tp2.Visible = false;

BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”);
tp2.Controls.Add(bctl2);
Tabs.Add(tp2);
}

SetActiveTabIndex(0);
}
private void AddTab(String BaseControlPath, String TabName, int TabIndex)
{
TabPanel tp = new TabPanel();
tp.HeaderText = TabName;
tp.ID = “Tabs” + TabIndex.ToString();
BaseControl bctl = (BaseControl)TemplateControl.LoadControl(BaseControlPath);
tp.Controls.Add(bctl);
Tabs.Add(tp);

int remainder = (TabIndex - 1) % 10;
if (remainder == 0)
{
_rowCount += 1;

TabPanel tp2 = new TabPanel();
tp2.HeaderText = “&lt;div style=’clear:both;’&gt;”;
tp2.ID = “TabsBR” + TabIndex.ToString();
tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”;
tp2.Visible = false;
BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”);
tp2.Controls.Add(bctl2);
Tabs.Add(tp2);
}
}

Comment posted by Derek Brown on Monday, December 22, 2008 10:21 PM
setting activetab index...


//////on the aspx...
        <asp:HiddenField ID="activeTab" runat="server" />
        <script type="text/javascript">
            function ActiveTabChanged(sender, e) {
                var activeTab = $get('<%=activeTab.ClientID%>');
                activeTab.value = sender.get_activeTabIndex();
                SetActiveTabIndexCookie(activeTab.value);
            }
        </script>
        <MyControls:SuperTabContainer runat="server" id="SuperTabContainer1" OnClientActiveTabChanged = "ActiveTabChanged";  />


//////on aspx page_load...
protected void Page_Load(object sender, EventArgs e)
        {

            int ActiveTabIndex = 0;
            if (Request.Cookies["activetabindex"] != null)
            {
                try
                {
                    ActiveTabIndex = int.Parse(Request.Cookies["activetabindex"].Value.ToString());
                }
                catch
                { ActiveTabIndex = 0; }
            }


            if (ActiveTabIndex > SuperTabContainer1.Tabs.Count || ActiveTabIndex <= 0)
            {
                SuperTabContainer1.ActiveTabIndex = 0;
            }
            else
            {
                SuperTabContainer1.ActiveTabIndex = ActiveTabIndex;
            }

            HttpCookie cookie = new HttpCookie("activetabindex");
            cookie.Value = SuperTabContainer1.ActiveTabIndex.ToString();
            Response.Cookies.Add(cookie);

        }



//////javascript ref from aspx...
function SetActiveTabIndexCookie(cvalue) {
    if(document.cookie != document.cookie)
    {
        index = document.cookie.indexOf(cookie_name);
    }
    else
    {
        index = -1;
    }

    if (index == -1)
    {
        document.cookie = 'activetabindex=' + cvalue + ";";
    }
}


    
Comment posted by Robert Werner on Tuesday, December 23, 2008 4:39 PM
I'd like to second what Babu said: How does one have a CSS Class for each individual tab's body?  The current white background just isn't appealing.
Comment posted by Ben on Thursday, January 15, 2009 10:22 AM
Thanks for this last post. I converted it to VB and it worked perfectly.
Comment posted by Wade on Monday, February 2, 2009 2:32 PM
How does a person change the color of the HeaderText dynamically to another color?  I want to change the HeaderText when a Textbox, etc. errors to "Red"?  I can change the Panel Color to Red, but the Tab doesn't change color.
Comment posted by Wade on Monday, February 2, 2009 2:56 PM
How does a person change the color of the HeaderText dynamically to another color?  I want to change the HeaderText when a Textbox, etc. errors to "Red"?  I can change the Panel Color to Red, but the Tab doesn't change color.
Comment posted by Airborne on Tuesday, March 3, 2009 4:24 PM
How do you get multiple rows with just using CSS?  

I tried adding this to my page...

<style type="text/css">
    .ajax__tab_xp .ajax__tab_header
   {
    white-space:normal;
   }
</style>

But it didn't work
Comment posted by Nikhar on Friday, May 8, 2009 12:54 AM
hey nice article. i have a releted problem i think..
well i placed an accordian control inside my tab panel. Now the thing is sometimes my accordian overflows so i ve set its "autosize" property to "limit" now the problem is that when i expand one accordian panel the other accordian headings disappear... i tried increasing the hight property of the tab container, tried overflow set to scroll but the tab just will not display the accordian headings...
Comment posted by Amol on Thursday, June 4, 2009 9:38 AM
i have 15 tabs based on certain condition i make them visible false ,problem is suppose currently 7 tabs r visible,when i click on 6th tab which in on design time placed on 10th the content of 6th and 10th tab is showing. please help me
Comment posted by Greg on Friday, July 17, 2009 11:38 AM
Very nice article.  Helped me solve a very vexing problem with moving to the first tab when disabling others from view.  Thanks for your efforts.
Comment posted by Santosh on Thursday, November 5, 2009 1:58 AM
Good Article.How to use TabContainer in Master Pages.When i click on that Particular Tab i want to load one .aspx page for that particular tab.I have 5 Tab Panels.Please help me.Thanks.
Comment posted by Rich on Friday, November 13, 2009 6:46 AM
[quote]Comment posted by Amol on Thursday, June 04, 2009 9:38 AM   
i have 15 tabs based on certain condition i make them visible false ,problem is suppose currently 7 tabs r visible,when i click on 6th tab which in on design time placed on 10th the content of 6th and 10th tab is showing. please help me[/quote]

Did you find a fix to this because this I have the same problem and it's driving me NUTS!
Comment posted by luis on Thursday, November 26, 2009 4:42 PM
como puedo trabnajar un tabs, si quiero saber si hay datos en el tabs anterior
Comment posted by Abdur Rafay on Thursday, December 10, 2009 4:16 AM
Hi, I had an Issue using Tip 5 Method 2... The reason was that I was using Tab Control in a User Control and it was unable to navigate between panels in the Parent aspx page.
How ever I just modified the Java script a bit and Thankfully issue was resolved..
The JavaScript I used was..
<script type="text/javascript">
    function MoveTab(num) {
        var container = $find('<%= TabContainer1.ClientID %>');
        container.set_activeTabIndex(num);
    }
</script>

Comment posted by o;oi on Monday, January 11, 2010 8:32 AM
opopiop
Comment posted by Diesel on Wednesday, January 20, 2010 6:30 PM
I have tab container with three tabs. Conditionally I want to enable and disable all the fields on 2 tabs. Can you please suggest a way to do it. Thanks.
Comment posted by James Wang on Monday, January 25, 2010 2:31 PM
anyone find tip 4 and 5 useful? not only does it apply to the whole tabcontainer, it actually mess up the whole display, you can even see a tab anymore.  I wonder if the author ever try himself before he publish these tips?
Comment posted by How to call javascript code from server side while using AJAX on Wednesday, April 21, 2010 2:48 AM
How to call javascript code from server side while using AJAX
Comment posted by ikram on Sunday, September 5, 2010 6:46 AM
i execute your code adjust but the message during runtime appear :
throw new Error("AjaxControlToolkit requires ASP.NET Ajax 4.0 scripts. Ensure the correct version of the scripts are referenced. If you are using an ASP.NET ScriptManager, switch to the ToolkitScriptManager in AjaxControlToolkit.dll.");
please help me
with my regard
Comment posted by abhishek on Saturday, December 4, 2010 5:22 PM
ada
Comment posted by Rajesh on Tuesday, December 7, 2010 3:53 AM
good yaar nice article
Comment posted by darshan on Wednesday, December 15, 2010 5:58 AM
Hi,
I have used the tab container and 3 tab panels in it.
I have a post back happening in each of tabs at some point of time.
each time of post back the first tabpanel is displayed.
I have tried to use OnActiveTabChange property of tabcontainer to set the activetab id to a viewstate so that on tabcontainer load i can check value in viewstate and display.
but the function  for OnActiveTabChange is never called when i change from 1 tab panel to another.  
How does this event trigger?
is there any alternate solution ?
Comment posted by pavan on Monday, December 20, 2010 5:34 AM
What is Control?,i am not able to find the Control..
Control c = (Control)ctrl;
Comment posted by JeffKish on Saturday, February 5, 2011 3:29 PM
Hi there. Good article.
Still it didn't help in my case because I am generating the tabs dynamically. Therefore, I can not use the method you use.
I created the CssClass and tried it without any success.
Here is the code:
-----
For i = 0 To dtTable.Rows.Count - 1
  Dim tabpanel As New AjaxControlToolkit.TabPanel
  tabpanel.HeaderText = dtTable.Rows(i).Item(0)
  tabpanel.ID = Replace(dtTable.Rows(i).Item(0), " ", "")
  tabpanel.CssClass = "BackColorTab" 'I have also tried tabpanel.BackColor = Drawing.Color.Red, but of course did not work either
  tbcDynamic.Tabs.Add(tabpanel)
Next
phNCDR.Controls.Add(tbcDynamic)
----------------------  

I would appreciate any help... My client wants to turn the tabs red if not all the mandatory fields within that tab are not filled...
So, it is quite critical to be able to control the color of the tab on the fly.

Thanks,
JeffKish
Comment posted by sandeep on Friday, May 20, 2011 10:06 PM
hi, i am using it in framework 3.5. For some reason they are not getting visible.
It auto insert "visibility:hidden;" style.

Thanks,
Sandeep
Comment posted by Brabbeldas on Tuesday, July 19, 2011 12:14 PM
Great article! I helped me getting started!

I was hoping you could help me with the following:
My code dynamically created TabPanels and adds these to the TabContainer. The code also sets the HeaderTemplate and ContentTemplate like this:

// Create TabContainer //
TabContainer tabContainer = new TabContainer();

// Prepare templates
ITemplate contentTemplate = Page.LoadTemplate("TemplateTabContent.ascx");
ITemplate headerTemplate = Page.LoadTemplate("TemplateTabHeader.ascx");

// Create Tab, with templates  
TabPanel newTab1 = new TabPanel();
newTab1.ContentTemplate = contentTemplate;
newTab1.HeaderTemplate = headerTemplate;

Both templates contain multiple controls (the header for example contains a Label and an Image). I need to set properties of these controls but I can not reach them:
- The controls which are on the templates are not part of the Tab.Controls collection as Tab.Controls.Count = 0.

- Other controls that use the <ContentTemplate> expose a property called ContentTemplateContainer that is used to access the controls of the ContentTemplate. The TabPanel control does not expose this property.


Do you know how to do this? Or maybe a workaround to accomplish the same in a different way?
Please also see my post here:
http://forums.asp.net/t/1701468.aspx/1?Find+controls+inside+a+TabPanel+s+ContentTemplate+and+HeaderTemplate

Thanks in advance! Bas
Comment posted by vishal on Tuesday, October 25, 2011 6:11 AM
hi....i want to add new tab in tab container when i click on + button
Comment posted by Ashish J on Wednesday, November 23, 2011 3:21 AM
AjaxCtrl:TabContainer the ActiveTabChanged event shows incorrect ActiveTabIndex

Solution:
1. Register the clientside event of the tab container:
OnClientActiveTabChanged="Tab_SelectionChanged"
2. Then define the javascript function to handle the above event which will internally store the tab index in a hidden variable.
function Tab_SelectionChanged(sender,e)  {
        document.getElementById('<%=hdntabIndex.ClientID %>').value =  sender.get_activeTabIndex(); }
3. Use the hidden variable in the code behind where ever you need the antive tab index.
Comment posted by Ahmad on Thursday, December 8, 2011 2:18 PM
Hi, this article is very nice and I have a question. How I can hide whole Ajax tab container on demand
For example I have 5 options with radio buttons and when user selects 3rd option I want to display Ajax tab container but after that he once again selects any option other than option 3 I want to hide Ajax tab container.

At radiobutton_SelectedIndexChanged event I am using following condition but that is not working

protected void radiobutton_SelectedIndexChanged(object sender, EventArgs e)
{
if (SelectedOption == 3)
    {
          this.ajaxTabFoldoverBusinessCard.Visible = true;
    }
else
    {
           this.ajaxTabFoldoverBusinessCard.Visible = false;
    }
}

even by above code when I am selecting different options visible property setting up but Ajax tab container not showing. While declaring Ajax tab container in my .aspx page I set visible = false.
Comment posted by Guruprasad on Saturday, December 31, 2011 8:11 AM
for me,<asp:ToolkitScriptManager ID="id" runat="server"></asp:ToolkitScriptManager> is working. now what you described in your code <asp:scriptmanager>
Comment posted by swapnil on Wednesday, February 15, 2012 2:37 AM
I am trying to Load the content inside the tab panel dynamically (generating controls on the fly).
This works fine.

Now What I need is, I need to fire a javascript function whenever user navigates to the third tab.
I am able to do so using an html button as suggested by you, but I also need to fire the same function on tab click event as well.
As soon as I write onclientClick="Functionname();" , The Tab panel contet stops to load.

Comment posted by James on Tuesday, February 28, 2012 10:27 AM
hi, i have a question.
everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8.

is there something i have to add to the code?
thank you!
Comment posted by James on Tuesday, February 28, 2012 10:44 AM
hi, i have a question.
everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8.

is there something i have to add to the code?
thank you!
Comment posted by James on Tuesday, February 28, 2012 11:04 AM
hi, i have a question.
everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8.

is there something i have to add to the code?
thank you!
Comment posted by Parin Shah on Monday, March 19, 2012 1:38 PM
hello Mr. Agrawal, I find this article very useful. i am currently working on one project. in that, "ID" is primary key. i need to search for "ID" field in whole database and show that tables in Ajax tabcontrol which we find after "ID" search. can you tell me the procedure for this?
Comment posted by parin shah on Monday, March 19, 2012 1:42 PM
hello james, drag and drop the script manager into your page and run the project.
Comment posted by raj on Tuesday, April 3, 2012 1:45 AM
how to use link button in ajax tab container
Comment posted by arya on Thursday, April 5, 2012 7:24 AM
Hi Suprotim,
I have used the tabcontainer with four tab panels on my page, it seems working fine with internet explorer, but whenever i try this with firefox or chrome it does load correctly at the first time but after one or two postbacks it does not load properly, like some of the controls are missing, controls does not pick values... I even tried asp:ToolkitScriptManager instead of scriptmanager but of no use. I even reset the activetabindex, set the visible to true at page load event but of no use. It is not working properly with either chrome or firefox, but it works with internet explorer.
Comment posted by adrian on Thursday, May 10, 2012 5:52 AM
I have a tab panel and i want to display there all the results of my search query.. Can anybody help me out of this. Im really stuck in this method.
Comment posted by zcv on Monday, June 18, 2012 4:21 AM
asdfasdfasd
Comment posted by AdrianK on Friday, October 12, 2012 4:35 AM
Hello!

Can you advise me/give me a tip on how to load the content only for the active tabpanel in a tabcontainer?
Let's say I have 10 tabpanels, every tabpanel loading a usercontrol, every one holding another usercontrol(with some buttons), that hold a final user control (with a gridview)...

The unwanted behaviour that takes place now is that on page load all the tabpanels are loading up, so the user has to wait for some time, oposite to waiting only for the first tabpanel...

Thank you in advance!
Adi
Comment posted by sushant on Monday, November 19, 2012 3:18 AM
I want to disable mouse click on tab to avoid tab changed on mouse. I want to do it using buttons only... using buttons I can do the job yet mouse click is not disabled yet. i tried this, didnt helped much.
$find(TabControl).get_tabs()[1].set_enabled(false);
Comment posted by Ross on Monday, February 18, 2013 5:34 AM
How to add a tab dynamically? Suppose a user clicks on any of the link/content in tab and I want to have the details of the clicked item to be opened in a new tab adjacent to the current tab?
Comment posted by srinivasa on Monday, April 1, 2013 2:32 AM
I want to tab container with multiple gridviews using freeze panes at same time every gridviews freeze panes.please help me
Comment posted by Hammad Khan on Wednesday, April 17, 2013 12:01 AM
Thank you so much for the code. Your code is working gr8 :)
Comment posted by fggfdgf on Tuesday, April 23, 2013 7:34 AM
gfgffffffffffffffffffffffff
Comment posted by surekha on Wednesday, July 31, 2013 4:52 AM
tried
  <style type="text/css">
        .BackColorTab
        {
            font-family:Verdana, Arial, Courier New;
            font-size: 10px;
            color:Gray;
            background-color:Silver;
        }
    </style>

& applied the css to the tab thr' code as tbconatiner.tabs.item(0).cssclass="BackColorTab"
but the tabpanel color doesnot change
Comment posted by shanthi on Wednesday, August 28, 2013 11:07 AM
Hi Sir,
i have one aspx page containing some label and textbox.then i have tabs to enter the details of the header part.How to do this.
Comment posted by dms on Wednesday, October 9, 2013 12:42 PM
Is it possible to link to another page when tab is clicked but have the other page appear to be inside the tabpanel -similar to how master pages display content from other pages?

I need to have separate pages to authenticate users - only certain users will be eligable to certain content in tabpanels.

Comment posted by Ahmed on Wednesday, January 29, 2014 6:59 AM
Superb! Thanks!
Comment posted by aarthy on Friday, August 8, 2014 3:49 AM
Hello sir i have one question that i want to display grid within the tab container based on drop down value is selected, these grid is used to insert the additional records from the user pls help me sir. thanks in advance.
Comment posted by Aarthy on Thursday, August 14, 2014 4:47 AM
Sir Pls Reply To My Post, Its urgent.
Comment posted by ram on Monday, September 8, 2014 1:54 AM
hi sir i have one problum that is i have gridview with controls of textbox and dropdown and imagebutton named it as edit in first tabpanel and i want to move to next tabpanel when i click the iamgebutton in gridview along with the gridview control values to do update those values in second tabpanel so plz kindly do needfull to me thanking you
Comment posted by Anil Kumar on Thursday, September 11, 2014 7:40 AM
Hello Sir,

I need to fix scrolling position on postback. I used a aspx page within this I have  a update panel within this I am using ajax tabcontainer and within the tab panel I am calling an user control. In this usercontrol some checkbox with textboxes are there and I need postback for this control but after postback my scrolling position is not maintaining. I tried a lot but I didn't find correct solution for my situation.