How Do I: Use the ASP.NET AJAX Tabs Control?

This video demonstrates the basics of the Tabs control from the ASP.NET AJAX Control Toolkit, with which you can create a set of tabs to organize content on a Web page. The selected tab is maintained across post backs, making the Tabs control ideal for form-based administration pages.

Presented by Joe Stagner

Duration: 8 minutes, 13 seconds

Date: 22 June 2007

Watch the video   |   Download the video   |   Get VB code  or  C# code

Video downloads: WMV | Zune | iPod | PSP | MPEG-4 | 3GP

Audio downloads: AAC | WMA | MPEG-4 | MPEG-3 | MPEG-2

Comments : 61

Leave a Comment

Rose123_123 : On March 05, 2008 1:18 AM said:

i want to know the dynamic creation of tabs on some events like button clicked or on selectedindexchanged of dropdownlist...

and the number of tabs created should be based on the item selected by dropdowm list..

JoeStagner : On March 14, 2008 11:14 AM said:

There is good news and bad news.

The good news is that tabs are easy to add.

       TabPanel[] newpanels = new TabPanel[NumNewTabs];

       for ( iCnt = 0; iCnt < 3; iCnt++)

       {

       newpanels[iCnt] = new TabPanel();

       newpanels[iCnt].HeaderText = String.Concat("New Panel" + iCnt);

       TabContainer1.Tabs.Add(newpanels[iCnt]);

       }

The bad news is that if your AJAX application si doing page postbacks, your added tabs don't survive a postback so you will have to keep that of what you've added and RE-created the added Tabs in the Page_Init method.

rhmayer : On March 14, 2008 10:22 PM said:

I just downloaded the Ajax Control Toolkit 3.5 for VS 2008.  However, after loading the controls into my toolbox, I see the  TabContainer control, but not the TabPanel control which is used in the video.

JoeStagner : On March 15, 2008 9:48 AM said:

TabContainer is the root control.

Panels are like templates inside the container.

mohanmothupally : On March 17, 2008 3:49 AM said:

Hi Joe,

I am trying to start using the AjaxControlToolkit. I followed all the

instructions on the following page:

ajax.asp.net/.../Setup.aspx

The only thing I did differently is I did not create my website from the

"ASP.NET AJAX Web Site" template, because my site already exists, and I

don't want to recreate the whole thing. I can see all the "AJAX Extensions"

and "AJAX Control Toolkit" controls listed in Visual Studio .NET 2005's

Toolbox.

The control i am making use of is tab control.

I have added a script manager and a tab control. Then a tab panel inside the tab control. Added contenttemplate to the tab panel.

when i run the application, nothing gets displayed.

please find my code.

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

<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"

   Namespace="System.Web.UI" TagPrefix="asp" %>

<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

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

<html xmlns="www.w3.org/.../xhtml" >

<head runat="server">

   <title>Untitled Page</title>

</head>

<body>

   <form id="form1" runat="server">

   <div>before mgr

       <asp:ScriptManager ID="ScriptManager1" runat="server">

       </asp:ScriptManager>

       <cc1:TabContainer ID="TabContainer1" runat="server" >

           <cc1:TabPanel ID="TabPanel1" runat="server">

           <ContentTemplate>hello</ContentTemplate>

           <HeaderTemplate>tab1</HeaderTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel2" runat="server">

           <ContentTemplate>hello2</ContentTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel3" runat="server">

           <ContentTemplate>hello3</ContentTemplate>

           </cc1:TabPanel>

       </cc1:TabContainer>

       after mgr

   </div>

   </form>

</body>

</html>

Any help is highly appreciated. Thanks in advance.

JoeStagner : On March 20, 2008 5:28 PM said:

What DOES happen? Feel free to email me off line through my blog at www.JoeOn.net

assafg2 : On March 23, 2008 8:10 AM said:

i dont know why but i cant get a diffrent  bg color fot the tab's

i have try this 2 and...

<cc1:TabContainer ID="TabContainer1" runat="server" BackColor="Aqua">

   <cc1:TabPanel ID="tab1" runat="server" HeaderText="חופשות" BackColor="Green">

<ContentTemplate>

any idea ?

NettaA : On March 25, 2008 7:47 AM said:

you have to use css, like here:

www.asp.net/.../Tabs.aspx

(i'm working on it right now...)

NettaA : On March 25, 2008 7:58 AM said:

Hi Joe, I have a question..

I want my tabs-headers to have rounded-corners + shadows.

I almost got everything OK, using CSS, but it is still not 100%.

So I thought maby i should put tables in the HeaderTemplates, this way:

                   <HeaderTemplate>

                       <div style="overflow-y:visible;">

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

                               <tr>

                                   <td style="background-image: url(/_layouts/images/RightTab1.gif); width: 6px">

                                   </td>

                                   <td style="background-image: url(/_layouts/images/CenterTab1.gif); background-repeat:repeat-x; ">

                                       bla bla

                                   </td>

                                   <td style="background-image: url(/_layouts/images/LeftTab1.gif); width: 6px">

                                   </td>

                               </tr>

                           </table>

                       </div>

                   </HeaderTemplate>

my question is: can i use different HeaderTemplate for active and non-active tab ?

Thanks

Chris Rivard : On March 25, 2008 9:46 AM said:

Is there a way to move the tabs from the top to the bottom?  Would this be via CSS?  If so, could you provide an example.  Thanks!

fizch : On March 31, 2008 11:15 AM said:

How do I get the tab panel to postback on a client click event? The tab container has the active tab changed event, but that fires after the tab has changed, and the content that was on the previous tab is out of scope. The client clic event actually fires at the correct time.

LukeNLaura : On March 31, 2008 1:31 PM said:

Hi,

I need help on TabContainers where it appears on a modalpopup.  The controls that are within the TabPanels are getting rendered on the screen but stepping through the code, the values of the controls (eg. textboxes) are null.  So when I try to reference the textbox to get the value, the application returns back an null reference error.

I am new to AJAX controls and so any help will be greatly appreciated.

JoeStagner : On April 01, 2008 7:09 AM said:

Chris - relocating the tabs is not supported in this version of the control, but you could modify the source.

Fizch - You can postback with the ScriptManager  (I'll post a video this week.) The fact that the orrigioal Tabs content is not visible doesn't mean that it's not still on the form and therefore posted back.)

LukeNLaura - a TabCotainer inside a Modal Dialog may not work. Feel free to email me (use the contact link on my blog at www.JoeOn.net) and I'll try to help.

NIckKhaja : On April 01, 2008 3:43 PM said:

Hi Joe,

I am have a tab container with 21 tab panels on my page.

To reach to the 21st panel I have to scroll the page horizontally instead of this I want to add a small button or kind of drop down list in which I can see the rest or the complete list of the tab panels.

Thanks.

pardo : On April 01, 2008 10:40 PM said:

The tabs control works great. However, I'm generating mine at runtime. When I wire up:

tabContainer1.attributes.add("OnClientActiveTabChanged", "SwitchTabs();")

My function "SwitchTabs();" doesn't execute. I'm able to fire execute the function if I create the control at design time, but this doesn't serve my needs. Any advice?

Thanks

pardo

parth_192 : On April 03, 2008 7:34 AM said:

Hi how can i use this tab control for two level tabs..like first level of Parent tab and on clicking on that there is another tab control under that parent tab which are child tab...can u help me out..

Thanks,

Parthiv

JoeStagner : On April 03, 2008 6:20 PM said:

Guys - great that your pushing the limits. In order to do those kinds of things that the control is not designed to do you will need to customize the code. Luckilly, it's open source !

Reclaimer : On April 16, 2008 8:58 AM said:

[quote]The bad news is that if your AJAX application si doing page postbacks, your added tabs don't survive a postback so you will have to keep that of what you've added and RE-created the added Tabs in the Page_Init method.[/quote]

any tutorials? thanks.

JoeStagner : On April 16, 2008 2:22 PM said:

Actually - I have did a tutorial that should be live here late tomorrow. :)

Dollarjunkie : On April 16, 2008 3:29 PM said:

I have a question. From the video tutorial I noticed you mentioned over and over that one could place any HTML and dynamic content within the content tags of the TabPanel Control and I wanted to know if the dynamic content could include, say, a repeater control or any other server side controls? I tried those a couple of time and wanted to get info from the expert if it is even possible to do such.

pandacad : On April 16, 2008 6:19 PM said:

I try to use the css styles but it not works, is necesary override some procedure?

Tab control steal working with a default webresource.

I'm using these css styles what is wrong?

.ajax__tab_xp .ajax__tab_header {font-family:Arial,Verdana,Tahoma;font-size:67.5%;backgroun d:url(img/tab-line.gif) repeat-x bottom;}

.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(img/tab-right.gif) no-repeat right;height:21px;}

.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(img/tab-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_tab {height:13px;padding:4px;margin:0;background:url(img/tab.gi f) repeat-x;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(img/tab-hover-right.gif) no-repeat right;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(img/tab-hover-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(img/tab-hover.gif) repeat-x;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(img/tab-active-right.gif) no-repeat right;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(img/tab-active-left.gif) no-repeat;}

.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(img/tab-active.gif) repeat-x;}

.ajax__tab_xp .ajax__tab_body {font-family:Arial,Verdana,Tahoma;font-size:67.5%;border:1p x solid #FF9900;border-top:0;padding:8px;background-color:#ffffff;}

And CssClass in tab control is equal to "ajax__tab_xp"

Thanks.

JoeStagner : On April 16, 2008 6:43 PM said:

Did they work when you tried them ? :)

I havn't treid them all but if you have a specific scenario that you are interested in, send me email.

gnuts4lunch : On May 09, 2008 7:24 AM said:

how can i create the tabs dynamically from a web.sitemap?

thanks

dollyp : On May 09, 2008 9:23 AM said:

i have a similar problem to one of the comments above. I'm using the Ajax toolkit with VS 2005 and create a simplae page derived from a master page and dropped a tab container on it and created two tab panels but everytime i run it, the tab conatiner is not displayed at all. here's my code below, any help pls:

<asp:Content ID="Content1" ContentPlaceHolderID="PagePlaceHolder" Runat="Server">

   <cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1">

       <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">

       <ContentTemplate>hello</ContentTemplate>

       </cc1:TabPanel>

       <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">

       <ContentTemplate>hi</ContentTemplate>

       </cc1:TabPanel>

   </cc1:TabContainer>

   <asp:ScriptManager id="ScriptManager1" runat="server">

   </asp:ScriptManager>

vrao : On May 15, 2008 8:59 AM said:

The tutorial was help full

1. can we get more video demonstration on how to use Css for

  Ajax Tab Manager

2. On How to carry Server Variables

3. How to check sessions if I am using a log in using Ajax Tab

thank you

jay prad : On May 16, 2008 6:50 AM said:

Hi Joe

I have two questions here

first is:I like the form of using tab control to navigate for my whole site because the user doesn't need to leave this page and every thing around (outside) tab control not going to effect if the user click each tab to display each page. The question is if those tab contain lots of memory to collect for example video files and sound and a lot more. Will it effect the loading time to open the home page which shown by default using the first tab.

second question: you metion we can use any kind of file in tab container for the tab to call that function to be display or used. Say my site have 3 tabs being used as a main menu for the site. first tab use for "home" page, second called "watch video" and use for calling this page have a silverlight video set to auto play and the third tab call log in and call third named "Login" to work.

Now what is the code to put in tab container to call the video page to work when the user click the second tab.

I don't know that make sense

Thank for reading Joe  

nkellogg : On May 18, 2008 6:25 PM said:

Joe,

How do I have the TabPanel height adjust to a datalist that is bound at page_load? The panel shows the data but does not expand to incorporate the data within the panel...

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">

<ajaxToolkit:TabPanel ID="WomensTabPanel" runat="server" HeaderText="Women's" TabIndex="0">

<ContentTemplate>

<asp:DataList ID="WomensDataList" runat="server" SkinID="DPApparel">

<itemtemplate>

<div class="Apparel">

<div class="ApparelImage">

<br />

<asp:HyperLink ID="HyperLink1" Target="_blank" runat="server" NavigateUrl='<%# Eval("marketplaceurl") %>'>

<asp:Image ID="Image1" runat="server" ImageUrl='<%# Eval("thumbnailurl") %>' AlternateText='<%# Eval("caption") %>' />

</asp:HyperLink>

</div>

<div class="ApparelTitle">

<%#Eval("caption")%>

<br />

</div>

<div class="ApparelDesc">

<%#Eval("sellerDescription")%>

</div>

<div class="ApparelPrice">

<%#String.Format("{0:c}", CType(Eval("Price"), Integer))%>

<br />

</div>

<div class="ApparelMore">

<asp:HyperLink ID="HyperLink2" Target="_blank" runat="server" NavigateUrl='<%# Eval("marketplaceurl") %>'>

<asp:Image ID="Image2" runat="server" ImageUrl="~/images/moreinfo.png" AlternateText="More Info" />

</asp:HyperLink>

<br />

</div>

</div>

</itemtemplate>

</asp:DataList>

</ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

Thanks,

Nick

violent : On May 26, 2008 12:45 PM said:

I want change color of TabContainer,TabPanel or insert pictures in that.

Please, for me advance.

Thanks.

S_Aijaz1 : On May 29, 2008 4:09 AM said:

I want to change back color and appearance of tabs.

Give full detail how can i.

som18121963@rediffmail.com : On June 02, 2008 9:35 AM said:

Thats great, I used it in my some of application for ERP. Your way of describing is unique. Please do not mind, I had copyied your way of teaching for the last 6 months or so. Geting a lot of appraisal, at Faridabad, India. My students are fond of my way of teaching and explaining (in fact its yours).

Best Regards

Somnath Mukherjee

meetmeaspadam : On June 07, 2008 2:12 PM said:

Hello JoeStagner,

I followed your tutorial. It works fine in firefox. But it doenot work in IE 8 browser. I mean, the content of first tab panel is displayed but doesnot the content of second and other  panels. I checked with ajaxcontrol toolkit samplewebsite. it also doesnot work in IE8. Please give me a solution of overcoming this problem.

Thanks

rikbrooks : On June 10, 2008 3:02 PM said:

OK, I put a TabContainer on my web control. Then I put TabPanels in that.

The background color came out blue. I've tried everything to change it. I tried setting the TabContainer BackColor and the TabPanel BackColor and niether work. How do I change the background color?

danielszabo1981 : On June 12, 2008 12:45 PM said:

Just wanted to say thank you.  These video tutorials are AWESOME.  Thanks for all your hard work. -ds

songoshin : On June 12, 2008 1:29 PM said:

First of all, the video and the toolkit are well made.

2nd : anyone manage to modify the css of the tab ?

I found some nice image to replace the one used by default, but so far I found no way to modify the css.

tried to modify the one in

\AjaxControlToolkit-Framework3.5\AjaxControlToolkit\Tabs\ta b.css

But nothing changed.

Any ideas ?

Thanks

Temora : On June 22, 2008 9:55 PM said:

thanks, & i have a problem, that i build a gridView binded with sql table & each row have '+' sign to show nested grid based on the row ID, i wanna make in this nested grid 3 tabs above to show different gridViews in each tab ...

i can only make the main grid in the tab container but when i make a tab container to contain the nested grid, i get error, even when i put an empty tab container withen ItemTemplate & tr & td & div of the main grid view ..

the error: there was an error rendering the control, a ScriptManager is required on the page to use ASP.Net AJAX Script components ...

please help....

Freon22 : On June 25, 2008 4:10 PM said:

Hi songoshin,

  I also had a hard time with changing the tab control styles. I guess that accounts for why there are so many third party tab controls out there. I found a blog that was great help. acushen.spaces.live.com/blog

So what I did was to copy the Css styles for the tab control into my own css.

Then I copyed all the gif for the tab control into my own image file. By the way if you download the source code all the picture (gif) are there just copy them to you own file.

I then renamed the .ajax__tab_xp to .ajax_tab_xp2

so it shows in my css file like so

/* xp theme */

.ajax__tab_xp2 .ajax__tab_header

{

   font-family:verdana,tahoma,helvetica;

   font-size:11px;

   background:url(../admin/adminImages/tab-line.gif) repeat-x bottom;

}

.ajax__tab_xp2 .ajax__tab_outer

{

   /*padding-right:4px;*/

   background:url(../admin/adminImages/tab-right.gif) no-repeat right;

   height:21px;

}

.ajax__tab_xp2 .ajax__tab_inner

{

   padding-left:3px;

   background:url(../admin/adminImages/tab-left.gif) no-repeat;

}

.ajax__tab_xp2 .ajax__tab_tab

{

   height:13px;

   padding:4px;

   margin:0;

   background:url(../images/tab.gif) repeat-x;

}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer

{

   background:url(../images/tab-hover-right.gif) no-repeat right;

}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner

{

   background:url(../images/tab-hover-left.gif) no-repeat;

}

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab

{

   background:url(../images/tab-hover.gif) repeat-x;

}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer

{

   background:url(../images/tab-active-right.gif) no-repeat right;

}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner

{

   background:url(../images/tab-active-left.gif) no-repeat;

}

.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab

{

   background:url(../images/tab-active.gif) repeat-x;

}

.ajax__tab_xp2 .ajax__tab_body

{

   font-family:verdana,tahoma,helvetica;

   font-size:10pt;

   border:1px solid #999999;

   border-top:0;

   padding:8px;

   background-color: Gray;

}

Now the last thing you need to do is apply the CssClass so my TabContainer looks like this.

<cc1:TabContainer ID="TabContainer1" runat="server"

                           Height="300px" Width="600px" ScrollBars="Vertical"

                            CssClass="ajax__tab_xp2" >

           <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Page 1">

           <ContentTemplate>

               <asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>

           </ContentTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="Page 2">

           <ContentTemplate>

           Page 2

           </ContentTemplate>

           </cc1:TabPanel>

           <cc1:TabPanel ID="tabPanel3" runat="server" HeaderText="Page 3">

           <ContentTemplate>

           Page 3

           </ContentTemplate>

           </cc1:TabPanel>

           </cc1:TabContainer>

You now have full control over the tab control style. Or I should say more control then you had before. LOL

songoshin : On July 08, 2008 9:23 AM said:

Hi Freon22, I did found out a few hours after my post the solution, but thanks for the informations.

Hace a nice day.

punitmdoshi : On July 09, 2008 1:47 AM said:

hi joe,

i wanted to add / delete tabs dynamically on the fly.

can u suggest a way or some sample code that i can use to implement it.It's very important to my site.

Regards Punit

jmurekezi : On July 09, 2008 8:14 AM said:

Hello,

How can you add a dynamic gridview(gv2) on let say tabpannel2 where the contents of gv2 has values passed by gv1 in Tabpannel1.

When a user selectvalue in gv1 he will be directed to the pannel2 and then gv2 be populated by values where the ID of the selectedValue matches the value in database.

Thanks

skendrot : On July 10, 2008 4:15 PM said:

punitmdoshi,

I have done the add part.  But I have for deleting tabs.

On my tabs, I place a [x] button (to close) which has an onclick event that sets a bool variable (closeTab) to true;

I subscribe to the OnClientActiveTabChanged event of the TabContainer. That method is below.

function TabAreaActiveTabChanged(sender, e)

{

   if(sender == null) return;

   if(closeTab)

   {

       var tabs = sender.get_tabs();

       var activeTabIndex = sender._activeTabIndex;        

       if((activeTabIndex >= 0) && (activeTabIndex < tabs.length))

       {

           //Set to false so that we do not get back in here when the tab is hidden

           closeTab = false;

           var tab = tabs[activeTabIndex];

       tab._hide();

       Array.remove(tabs, tab);

    }

   }

}

skendrot : On July 10, 2008 4:18 PM said:

Hmm.. no way to edit a post.

Sorry, I have NOT done the add part, but have done the delete.  I have noticed a problem when you delete the second to last tab.  I'm not sure if this is a bug in the toolkit, or something I am doing wrong.  

Hope this helps!

minakshi_23 : On July 11, 2008 4:29 AM said:

Dear Joe,

The video is really great.

I am trying to create a tabbed page with three tabs on it. I added the AJAX Web form and now I am not too sure what I have to do.

and when I am trying to go to the Source page it doesn't give me the Client and Objects page .. I think the Scripting page.

Could you please let me know what exactly do I have to do.

minakshi_23 : On July 11, 2008 6:20 AM said:

Dear Joe,

Just wanted to tell you that I have got the solution to my query.

Yea, thanks a lot for your the video.

Regards,

gigizunino : On July 11, 2008 7:45 AM said:

Dear Joe,

I use a tab control in a ASCX and I've some problem in the visualization of the header text of them

the following image report my problem

img141.imageshack.us/my.php

any idea about this?

thanks

Gigi

mackvb : On July 11, 2008 1:16 PM said:

gigizunino,

I had the same issue when I was using Response.Write(...) in the Page_Load.

Once I took that out they rendered correctly.

Newbie_4ASP.Net : On July 15, 2008 12:03 PM said:

Hi Joe,

I have been trying to create a webpage using ajax tab and call that page on iframe.But when i call at iframe, seems that the tab can not work. Any Idea?help plz.thanks

rfalagan : On July 16, 2008 4:25 PM said:

I have two issues:

For some reason I can't get it to work If I try a tab with two tab Pannels. One tab panel has a  DetailsVIew Control the second tab panel has a GridView.

Not as important but worth sharing. I don't see the tabpanel control listed in my AJAX Toolkit in the toolbox. I have the tab container but not the tabpanel.    

Michelle85 : On July 31, 2008 4:26 AM said:

Dear Joe,

I've created a tabContainer and added some panels, now I want the same tab panel (the first one) to show when the page loads. How can I do this? Currently it loads the tab panel which was last viewed before closing.

Thanks

Xgm : On July 31, 2008 10:57 PM said:

Hi

Is it possible to link the individual tabs to a treeview menu - via a sitemap or xml?

This is for a situation where i want to use the tabs to represent individual webpages all on the same aspx page

and have a treeview menu which links to each tab?

thanks

weitzhandler : On August 03, 2008 12:55 AM said:

I was wodering if I could make the tab headers in a special design i.e. put some extra space between them / add special design to a specific tab header and so on.

is it possible?

I have manually developed one in JavaScript but it's really ugly especially if there is an way to use Ajax.

here: farm4.static.flickr.com/.../2727414530_b793984afb_o.jpg iss what I developed.

please let me know if there is a way.

ramkiMCH : On August 04, 2008 8:02 AM said:

Hi, Joe..

I shall include any namespace or DLL to get TabPanel[] class? for the below code..

TabPanel[] newpanels = new TabPanel[NumNewTabs];

      for ( iCnt = 0; iCnt < 3; iCnt++)

      {

      newpanels[iCnt] = new TabPanel();

      newpanels[iCnt].HeaderText = String.Concat("New Panel" + iCnt);

      TabContainer1.Tabs.Add(newpanels[iCnt]);

      }

Thanks,

ram

cv_vikram : On August 07, 2008 8:07 AM said:

Good tutorial..thanks

abhishek0410 : On August 08, 2008 1:46 AM said:

Hi Joe,

     I am not able to find the tab panel control in my ajax control toolkit list..

Any solution to it???

Thanks

dba123 : On August 11, 2008 4:57 PM said:

What about nested tabs.  Lets say I have an Admin tab, user clicks on that tab and I want to see a 2nd row of tabs and so on.

example:

cse-mjmcl.cse.bris.ac.uk/.../nested.html

dba123 : On August 13, 2008 5:37 PM said:

I have found this control to be a pain in the ass.  Managing postbacks, and doing something as simple as loading a page when you click a hyperlink is something not easy.

Here are other issues and problems I came across:

1) I have a nested tab setup.  The panel in both controls has a blank header because I always want those to load by default.

   a) how to get those two to always load by default.  I do not see a way to target a certain panel and furthermore if you click on lets say a root parent panel, how to target a sub panel if you wanted to based on the click of the first.  But just for starters, I don't see a way to specify default panels on page loads.

2) I tried adding a repeater to one of my tab's controls (.ascx).  I bound it using a generic list.  I stepped through with the dubugger and sure enough the grid has values but nothing is rendered to the page.  This is just more wierdness with this tab control in general.  I should not have to think twice about something like a simple binding to a repeater, etc.

3) It seems like all tabs are being loaded at runtime.  That's horrible.  Only the default tab should load first and then when you cilck on a tab, that page does a partial postback or even full, I don't care but either way, if my entire site is loading everything every time you do an initial post or even postback, everytime is not good loading every page in every tab.

4) If I have a hyperlink in one of my tab's pages, I want the user to see a new tab to view whatever page they are redirected to.  Like in Firefox.  This seems simple enough but I bet you that you must do some extensive javascript to do this.  Rather than without tabs, you just redirect in a normal asp.net application.  So dealing with things such as redirection, postbacks becomes a huge burden in this control

5) Maintaining tab state.  I still do not see how this is done if you can at all.  If I refresh my page, somehow client-side should maintain state and not jump to your default tab again.

alexfreeman : On August 18, 2008 1:57 PM said:

Hi, Joe. I have some problem.

I need to add my HTML body to  TabPanel.ContentTemplate programmatically. How can I do it???

Thanks.

surajsunshine : On August 21, 2008 6:17 AM said:

i want to know the dynamic creation of tabs..on dropdownlist selection change...want to add dynamic controls on tabs..plz help..

chevrollbryan : On August 21, 2008 3:17 PM said: