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

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..

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.

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.

TabContainer is the root control.

Panels are like templates inside the container.

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" %>

">www.w3.org/.../xhtml1-transitional.dtd">

www.w3.org/.../xhtml" >

   

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

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 ?

you have to use css, like here:

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

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

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

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!

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.

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.

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.

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.

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

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

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 !

[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.

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

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.

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.

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.

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

thanks

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:

       hello

       hi

   </asp:ScriptManager>

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

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  

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...

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

Please, for me advance.

Thanks.

I want to change back color and appearance of tabs.

Give full detail how can i.

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

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

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?

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

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

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....

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.

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

                            CssClass="ajax__tab_xp2">

           Page 2

           <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

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

Hace a nice day.

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

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

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);

    }

   }

}

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!

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.

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,

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

gigizunino,

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

Once I took that out they rendered correctly.

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

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.    

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

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

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.

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

Good tutorial..thanks

Hi Joe,

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

Any solution to it???

Thanks

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

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.

Hi, Joe. I have some problem.

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

Thanks.

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

Alexfreeman,

I took a look at you request for assistance, and I think this may help you.

TabPanel.ContentTemplate = Page.LoadTemplate("yourUserControl.ascx");

Note: yourUserControl.ascx should be replaced by the name of your own user control.

Any subsequent logic will have to be tied into the user control.

Hi..I manage to do dymanic tabs..& manage the styles also..Thankx

hi,

how to change the tabcontainer direction to the vertical

how to change the asp.net ajax tabcontainer direction to vertical?

how to change the asp.net ajax tabcontainer direction to vertical?

I downloaded 3.5 and use VS2005.  I followed the instructions on the walkthrough.  I now am able to see the TabContainer under the HTML controls but for the tab I created for AJAX Control Toolkit nothing comes in when I choose items and follow the walkthrough steps.  Also, I can see the TabPanel.cs in the AjaxControlTookit folder in MS-ASP.NET. I just can't seem to get it to show up in VS2005.

I am unable to set the height and widht properies of a tab control, I want my tab control height and width should be 100% , I tried using css but i failed, can you please help, here is the html

<cc1:TabContainer ID="TabContainer1"  runat="server" ActiveTabIndex="0" Height="1100px" Width="411px" style="border:solid 5px red">

           <cc1:TabPanel runat="server" HeaderText="Contract Types" ID="TabPanel1" style="height:100%;border:solid 5px green">

               <ContentTemplate>

                   <iframe id="fram1" src="Tabs.aspx" style="height:100%;width:100%;"></iframe>

               </ContentTemplate>

           </cc1:TabPanel>

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

           </cc1:TabPanel>

           <cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="Payment Types">

           </cc1:TabPanel>

       </cc1:TabContainer>

I'm fairly new here.  I'm trying to make the tabs taller to fit more text, but don't know how to do it.  I've tried using the following, but all I get is the first line in the display. How do I get the tabs to expand with the text?

<HeaderTemplate>

FirstLine<br />

SecondLine<br />

ThirdLine<br />

Hello Gang,

    I have a question with regards to sharing content between multiple tabs. I have a situation where I have a basic query and advanced query tab. Is there a straightforward and sleek way to share the content between the tabs without having to copy all the elements to the "advanced" content panel? I appreciate the help.

                             Thanks, Neil Sachanandani

Joe (or anyone),

i have 4 tabs...i want the active tab to change based on time of day (Tab 1 displays between 9:00am - 12pm, TAB 2 FROM 12PM  - 2PM, etc).  What do ineed for the page and the code behind page.  I am new to AJAX so feel free to be as detailed as possible.

Thanks,

Denis

I don't think FireFox > 3.0 supports this control.

The tab control works fine when it is directly used in an ASPX page. When I make it as a User Control, it throws issues like the one Tamero got before..

The error is

"Error Rendering Control A script manager is required on the page to use ASP .NET AJAX Script Components"

Any idea TabContainer gurus?

Hi Joe, I like your video.

I am using Tabs on my web page.

I have one question,

  When I click on say Tab3 and I have gridview with the data, but once it loads the page, Tab1 gets enabled.

 It shows me Tab1 whenever page gets refreshed .

How to keep Tab3 active when user is on tab2.

Thanks, Send me email if you can

kalidas2@live.com

There is one typo in previous post.

 How to keep Tab3 active when user is on Tab3?

Thanks,

kalidas2@live.com

Joe, Can you put more videos on this topic.

On April 1 and April 16, Joe indicated that he was planning to post a video to demo using postbacks with tabs.  I haven't been able to find that video.  Does anyone know if that ever got posted and if so, where to find it.

Thanks!

Hi Joe

Excellent Tutorial Thanks.

I have problem with TabContainer, Sometimes its load Properly and Sometimes Gives Javascript Error on Loading Page

Error Like: "sys.invalidOperationException: Component 'Tab Container' was not found"  

please Provide Solution.

Thank You.

Chintan

Hi Joe, I'm a beginner to AJAX, please guide me that, how to customize the looks of the tab controls.

I have a TabContainer with two tab panels, and each tab panel contains a button (as well as other controls within an HTML Table) with which to run a report using a ReportViewer Control, etc.

The initial rendering of the page displays, and the first attempt at running a report elicits no response from the button.

However, when I click on the second tab (or visa versa), and try to run the report by clicking on the button, all is OK, and the report runs.

I'm writing to determine if this is something to do with active tabs, etc.  

Thanks in advance for any insight!

I got the CSS to work using Freon22's suggestion.

However, changing colors was a pain as the tabs and line they set on are all graphics.  It took some playing in Photoshop at 500% zoom to get the look I wanted.

It's unfortunate that one would need to modify every graphic multiple times if they wish to have a series of color themes available for user choice.

Thanks for the tutorial Joe, keep up the good work! Well I have a question for you, in order to reduce the file size I tried to use a master page so I could place every panel in a separate file like this:

<%@ Master Language="C#" AutoEventWireup="true" CodeFile="MasterPage.master.cs" Inherits="MasterPage" %>

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

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

">www.w3.org/.../xhtml">

   

Hi Joe,

Very nice and helpful tutorials...

I have one issue with Tab control, sometimes tab control doesnt get load at all, while the rest of page is fine? I am binding the tab to gridview. When I do the viewsource, everything seems ok and complete HTML code is there but its not displaying the Tabs at all. After doing some refreshes it get displayed though, very Strange?

I scrolled up and found some1 facing the same problem, but no solution to it till now.

What could be the problem?

Please help.

I've just downloaded the toolkit and placed the scriptmanager and the tab control on a blank page.  The text for each of the tab panels is only displaying the top half of the text, any suggestions?

Just wondering if it would be possible to split the tabpanel code into another couple of aspx pages?

I have a page that has a lot of tabs and i want to split it up to manage it better...

Any ideas?  Inhertinace, <!--#include file="" --> files...

Hi Joe,

I Have a requirement of creating Dynamic Tabpanels in the TabContainer when i click Button.Tab Page is created.But If I try create a new Tab or any other button on the page,its giving an error "Specified argument was out of range of valid values" .Cna you give me any answer for rectifying this.

Regards

Ayyappa

Hi Joe,

 I have an issues with the Tab Control and the Webparts. When i have the page which contains the tab controls and the Webparts, sometimes I am getting the JavaScript error.

Sys.InvalidOperationException The component "tabcontrol name" cannot be found

This is very similar to the case described in the post

forums.asp.net/.../1092293.aspx

Please go through it and propose a solution.

Thanks

Rajganesh M

Hi joe,

First, thanks for this tutorial. It's nice to have tabs on pages especially when layout is in trouble. Cramming things onto pages gets a little frustrating you know.

Second, How do I call a Server Side Script from when a tab is clicked? You explained how a javascript can be called from OnClick of the tab but what I need is to call a Server Side Script.

Hi Joe,

Thanks for your great tutorials!

I found it surprisingly easy to get up and running with the AJAX Toolkit.

I implemented tabs as you indicated in this video, and they're completely functional, but for some reason half of the tab title gets cut off in IE.

Do you know why this is?

Hi Joe,

Great tutorial, explained really nicely.

Question, is it practical to wrap my entire website around these tabs?

What I mean is moving all my .aspx pages into .ascx, then dropping those controls into a tab panel each.

So such as "Home", "Contact Us", "Download", "Uploads", "Update Files".

In a case like this, the uploads.ascx page will need to postback in order to submit a file when a user uploads.

Also the updatefiles.ascx has an ajax submit button, which I assume will work within a tab panel since you mentioned ajax within ajax works.

Also what is the difference between the ToolkitScriptManager, and the normal ScriptManager which I normally use?

I read most of these comments but the one I havent seen was where javascript and the _doPostBack('xxx', userConfirmation)

Example is when the user is using javascript to postback an answer, say when you click on a certain tab and the tab to load programatically.

Something like this...

if (this.IsPostBack)

           {

               string eventTarget = (this.Request["__EVENTTARGET"] == null) ? string.Empty : this.Request["__EVENTTARGET"];

               string eventArgument = (this.Request["__EVENTARGUMENT"] == null) ? string.Empty : this.Request["__EVENTARGUMENT"];

if (eventTarget == "UserConfirmationPostBack")

               {

                   if (eventArgument == "true")

                   {

                       // User said to go ahead and do it...

                       SaveAttendance();

                   }

          }

All previous information was derived this OnClientClick event.

private bool Validation()

{

if(mydatabasehasfoundarow)

{

StringBuilder sb = new StringBuilder();

               sb.Append("\n<script type='text/javascript'>\n");

               sb.Append("var userConfirmation = window.confirm('Duplicate attendance found. Do you wish to update?')\n");

               sb.Append("__doPostBack('UserConfirmationPostBack', userConfirmation);\n");

               sb.Append("</script>\n");

               string gawbage = sb.ToString();

               ScriptManager.RegisterStartupScript(this,

                   Page.GetType(), Guid.NewGuid().ToString(), gawbage, false);

return false;

}

else

{

return true;

}

}

But my question is how can i throw logic this into the tabs panel clientclickevent.

hi joe,

Nice video....

My requirement is to add different webpages in different tabpanels in one tabcontainer.And tabpanel should be created dynamically when the particular page on the master page is clicked.

Dear Joe,

I did exactly what you show me on your video about "Ajax Tabs Control".

When design my website, I'm using IE to view, the tabs work perfectly. But when i upload my website to the host server, it work perfectly with all browser (such as firefox, chrome, safari... ) except with IE (not working at all). I can not click on another tabs on my page.

My website is http://www.andrewsoh.net/

And here are my code:

Hi

What about the problem was dscribed by  "Mohanmothupally".

Is there any answer.

I want to add Ajax controls (tab) to my exist visual studio 2005 project.

Thanx

I have n Ajax tab control. It has three tabs, the default active tab in tab1. The content of tab1 includes two links (link1 and link2). When users click link1 then tab2 becomes active and also a gridview  is loaded on tab2, based on the viewState value passing from tab1. Same thing happens on tab3.

My question is: Is click event of Ajax tab control available? I would like to do is that when users click tab2 / tab3, my program set tab1 as a active tab automatically. (Because with no viewState value passing from tab1, tab2 and tab3 are all blank. . .)

But I can not find the click event hander for Ajax tab control

Please help. :))

Sorry I have AN Ajax tab control. Not n Ajax tab conrol :))

I need to create a tab panel dynamically. Evry data like Headertext ..etc are retrieved from a Sharepoint list.

But somehow am not getting how to dynamically create a content template or assign data to content template from Sharepoint list. The data in list is stored as Rich HTML text. i need to show that data in tab panel.

Any help in this direction would be appreciated.

the tab controller does not work inside contentPlacehorder, I am usin master page and cant get it to work on master page either. any ideas?

Great vidio,

I question you showed how to in code add tabs but not how to add to the content of the tab.  How do you do this.

Thanks again for all your help.

I can't type.  On the fly adding tabs I can add them in vb code but not the content of the tab.  Can you help.

How do I adjust the text size (and preferable make bold) of the tab labels ? The font properties for the TabContainer seem to do nothing...the Font-Size one sure does nothing....thanx ! (Soecific eaxmples are good BTW :-)

Joe,

I'm trying out the Ajax Tabs control. I have it working, and it's pretty slick, but the problem is, each tab will be in essance an entire .aspx page, and it appears that you can't assign each tab to external content, just against the controls within it on the same page, and the code-behind on the same page.

With multiple tabs, where each is in essance a virtual .aspx page, my code-behind is getting jammed up really fast.

Is there a way to assign each tab to a seperate .aspx file (which in turn is bound to it's code-behind class) ?....

As it stands now, my &quot;Contacts.aspx&quot; class has code equal to 5 .aspx pages, and it's getting unmanageable.

Thanx,

Barry O'Neill

Is it possible to show output of another page or any the content of Crystal report inside the Tab Container?

Hi

Does anyone know how to make the ajax Tab panels accessible? I noticed that akeyboard user is unable to tab through the tabs using this control. I have tried virtual everything i can think of setting tab index, access keys etc.. Can someone please help!!!

Thanks

Dips

I am having trouble downloading the AJAX Tool Kit to the Visual Web Developer 2008 Express edition. It does appear in the Toolbox. It does not show up in the Visual Studio Installed Templates.

boneill007,

you can try to put a asp:placeholder into each <ContentTemplate> and add then use LoadControl to put your ascx into the placeholder.

An example for setting active Index when you have validators in different tabs and want to set focus on tab in which the validator failed.

Create javascript method such as:

function RunValidationsAndSetActiveTab() {

if (typeof (Page_Validators) == "undefined") return;

try {

var noOfValidators = Page_Validators.length;

for (var validatorIndex = 0; validatorIndex < noOfValidators; validatorIndex++) {

var validator = Page_Validators[validatorIndex];

ValidatorValidate(validator);

if (!validator.isvalid) {

var tabPanel = validator.parentElement.control;

var tabContainer = tabPanel.get_owner();

tabContainer.set_activeTabIndex(tabPanel.get_tabIndex());

break;

}

}

}

catch (Error) {

alert("Failed");

}

}

In the button that is used to submit all the tabs at once where each tab has it's own set of validations you can call the above method on click of button on client side such as:

<asp:Button ID="btnSaveResponse" Text="Submit Response" runat="server" OnClick="btnSaveResponse_Click"

OnClientClick="RunValidationsAndSetActiveTab();" />

Hey Joe, can we add server controls in tab panels.

I just fired up this error TabContainer cannot have children of type 'System.Web.UI.WebControls.DropDownList'