ASP.NET AJAX TabContainer – Tips and Tricks

<!DOCTYPE html> <html lang="en"> <head id="ctl00_Head1"><meta charset="utf-8" /><title> ASP.NET AJAX TabContainer – Tips and Tricks | DotNetCurry </title><meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1" /><meta name="description" content="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." /><meta name="keywords" content="ASP.NET AJAX" /><meta name="author" content="DotNetCurry.com" /><meta name="CCBot" content="nofollow" /><link rel="shortcut icon" href="img/favicon.ico" /><link rel="icon" type="image/ico" href="img/favicon.ico" /><link rel="stylesheet" href="js/font-awesome/css/font-awesome.min.css" /><link rel="canonical" href="https://www.dotnetcurry.com/ShowArticle.aspx?ID=178" /><link href="/content/site?v=dSwaMsW0iplPE-tk0JGVwhcZRf6VKKqSg-lTdPGvZso1" rel="stylesheet"/> <style>.async-hide { opacity: 0 !important} </style>    <script> !function(f,b,e,v,n,t,s){if(f.fbq)return;n=f.fbq=function(){n.callMethod? n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!f._fbq)f._fbq=n; n.push=n;n.loaded=!0;n.version='2.0';n.queue=[];t=b.createElement(e);t.async=!0; t.src=v;s=b.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}(window, document,'script','https://connect.facebook.net/en_US/fbevents.js'); fbq('init', '1902706389940870', { //em: 'insert_email_variable' }); fbq('track', 'PageView'); </script> <noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=1902706389940870&ev=PageView&noscript=1" /></noscript>    <script> !function(e,t,n,s,u,a){e.twq||(s=e.twq=function(){s.exe?s.exe.apply(s,arguments):s.queue.push(arguments); },s.version='1.1',s.queue=[],u=t.createElement(n),u.async=!0,u.src='//static.ads-twitter.com/uwt.js', a=t.getElementsByTagName(n)[0],a.parentNode.insertBefore(u,a))}(window,document,'script'); // Insert Twitter Pixel ID and Standard Event data below twq('init','nw0gz'); twq('track','PageView'); </script>  </head> <body> <form name="aspnetForm" method="post" action="./ShowArticle.aspx?ID=178" id="aspnetForm"> <div> <input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwULLTE0MDk2ODQwMTdkZJysVikQVHzjAtZqOeUvZO1Bu1pl" /> </div> <div> <input type="hidden" name="__VIEWSTATEGENERATOR" id="__VIEWSTATEGENERATOR" value="A9C58E29" /> </div> <div class="wrapper">  <header class="header header-megamenu"> <nav class="navbar navbar-default" role="navigation"> <div class="container">   <div class="navbar-header"> <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse"> <span class="sr-only">Toggle navigation</span> <span class="icon-bar"></span> <span class="icon-bar"></span> <span class="icon-bar"></span> </button>  <a class="navbar-brand" href="https://www.dotnetcurry.com"> <img src="/img/dnc-logo-small.jpg" class="img-responsive" alt="DNC Magazine" /> </a> </div>  <div class="navbar-social pull-right visible-xs-block, hidden-xs"> <a href="https://www.facebook.com/dotnetcurry"><img src="/img/icon/fb.png" class="img-responsive" alt="DotNetCurry's Official Facebook Account" /></a> <a href="https://www.twitter.com/dotnetcurry"><img src="/img/icon/twit.png" class="img-responsive" alt="DotNetCurry's Official Twitter Account" /></a> <a href="https://github.com/dotnetcurry"><img src="/img/icon/git.png" class="img-responsive" alt="DotNetCurry's Official Github Account" /></a> </div>  <div class="collapse navbar-collapse navbar-ex1-collapse"> <ul class="nav navbar-nav"> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Tutorials <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li> <div class="row"> <div class="col-md-3"> <h5>ASP.NET</h5> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-ajax" class="last">ASP.NET AJAX</a> <h5>Patterns and Practices</h5> <a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> </div> <div class="col-md-3"> <h5>.NET</h5> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS (Azure DevOps) & TFS</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> <a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a> </div> <div class="col-md-3"> <h5>Cloud and Mobile</h5> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a> <a href="https://www.dotnetcurry.com/tutorials/devops">DevOps</a> <a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a> <a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a> <a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a> <a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a> <a href="https://www.dotnetcurry.com/tutorials/windowsphone" class="last">Windows Phone</a> <h5>Useful</h5> <a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a> <a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a> <a href="https://www.dotnetcurry.com/tutorials/general-programming-topics">General Topics</a> </div> <div class="col-md-3"> <h5>JavaScript</h5> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular</a> <a href="https://www.dotnetcurry.com/tutorials/typescript">TypeScript</a> <a href="https://www.dotnetcurry.com/tutorials/nodejs">Node.js</a> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5 & JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">Bootstrap & CSS</a> </div> <div class="col-md-3"> <h5>Publications</h5> <a href="http://www.jquerycookbook.com/">Books</a> <a href="https://www.dotnetcurry.com/magazine/" class="last">Magazines</a> <h5>Older Technologies</h5> <a href="https://www.dotnetcurry.com/tutorials/silverlight">Silverlight</a> <a href="https://www.dotnetcurry.com/tutorials/expression-web">Expression Web</a> <a href="https://www.dotnetcurry.com/tutorials/expression-blend">Expression Blend</a> <a href="https://www.dotnetcurry.com/tutorials/windows-vista">Windows Vista</a> <a href="https://www.dotnetcurry.com/tutorials/microsoft-word">Word 2007</a> <a href="https://www.dotnetcurry.com/tutorials/microsoft-outlook">Outlook 2007</a> <a href="#"></a> </div> </div> </li> </ul> </li> <li class="dropdown megamenu"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Featured <span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li> <div class="row"> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet"> <div class="hp-thumb"> <img data-src="/img/header/1385.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Aug 30, 2017</date> <h4><a href="https://www.dotnetcurry.com/angular/1385/angular-4-cheat-sheet">Angular 4 Development Cheat Sheet</a></h4> <p class="hidden-xs">A quick reference guide to get you going with Angular development. It uses Angular v4 with TypeScript.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1364/error-handling-dotnet-projects"> <div class="hp-thumb">  <img data-src="/img/header/1364.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>May 12, 2017</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1364/error-handling-dotnet-projects">Error Handling in Large .NET Projects - Best Practices</a></h4> <p class="hidden-xs">Learn some effective error handling strategies that you can use in your .NET projects.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1375/behavior-driven-development-bdd"> <div class="hp-thumb"> <img data-src="/img/header/1375.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>July 3, 2017</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1375/behavior-driven-development-bdd">Behavior Driven Development (BDD) – an in-depth look</a></h4> <p class="hidden-xs">Learn how Behavior Driven Development (BDD) works with a real-world example of how to use it.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/patterns-practices/1305/aspect-oriented-programming-aop-csharp-using-solid"> <div class="hp-thumb"> <img data-src="/img/header/1305.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Sep 25, 2016</date> <h4><a href="https://www.dotnetcurry.com/patterns-practices/1305/aspect-oriented-programming-aop-csharp-using-solid">Aspect Oriented Programming (AOP) in C# with SOLID</a></h4> <p class="hidden-xs">Aspect Oriented Programming (AOP) in C# using SOLID principles, with challenges and solutions.</p> </div> </div> <div class="col-md-3 col-xs-12"> <div class="header-post"> <a href="https://www.dotnetcurry.com/javascript/1359/javascript-frameworks-aspnet-mvc-developer"> <div class="hp-thumb"> <img data-src="/img/header/1359.jpg" class="img-responsive lazyload" alt="" /> </div> </a> <date>Sep 25, 2016</date> <h4><a href="https://www.dotnetcurry.com/javascript/1359/javascript-frameworks-aspnet-mvc-developer">JavaScript Frameworks for ASP.NET MVC Developers</a></h4> <p class="hidden-xs">Learn about a few JavaScript frameworks, and which one will be a good fit in your ASP.NET MVC apps</p> </div> </div> </div> </li> </ul> </li> <li class="dropdown megamenu"> <a href="https://www.dotnetcurry.com/magazine/">.NET Magazines</a> </li> <li class="dropdown dropdown-v1"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">About<span class="fa fa-angle-down"></span></a> <ul class="dropdown-menu"> <li><a href="https://www.dotnetcurry.com/About.aspx">About Us</a></li> <li><a href="https://www.dotnetcurry.com/WriteForUs.aspx">Write For Us</a></li> <li><a href="https://www.dotnetcurry.com/Contact.aspx">Contact Us</a></li> </ul> </li>  </ul> </div>  </div> </nav> </header>   <div class="container"> <div class="clearfix divborder"> <div class="col-md-8 column"> <div class="col-md-12 articlebox row"> <div class="articletitle"> <h1 class="articlehead"> <span id="ctl00_MainContent_lblTitle">ASP.NET AJAX TabContainer – Tips and Tricks</span> </h1> <b>Posted by: </b> <a id="ctl00_MainContent_lnkAddedBy" href="Author.aspx?AuthorName=Suprotim Agarwal">Suprotim Agarwal</a> , on 7/23/2008, in <b> Category </b> <a id="ctl00_MainContent_lnkCategory" href="BrowseArticles.aspx?CatID=59">ASP.NET AJAX</a> <br /> </div> <div class="articlestats"> <div class="stats1"> <b>Views: </b> 593156 <br/> </div> </div> <div class="articleabstract"> <b>Abstract: </b> 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. </div> <div class="socialshare"> <a class="resp-sharing-button__link" id="fbsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> </g> </svg> <span></span> </div> </div> </a> <a class="resp-sharing-button__link" id="twtsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> </g> </svg> <span></span> </div> </div> </a> <a class="resp-sharing-button__link" id="linkdinsharelinktop" target="_blank" aria-label=""> <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--small"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg> <span></span> </div> </div> </a>  </div> </div> <div id="articleBody" class="col-md-12 row"> <div style="MARGIN: 24pt 0in 0pt" align="justify"><b><font size="6"><font face="Cambria" color="#365f91" size="5">ASP.NET AJAX TabContainer – Tips and Tricks</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"> </div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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.</font></div> <div style="BACKGROUND: white; MARGIN: 0in 0in 10pt" align="justify"><font size="2"><font face="Verdana">I assume you have some basic experience developing ASP.NET AJAX applications and have installed the <span style="FONT-SIZE: 9pt; LINE-HEIGHT: 115%"><a href="http://www.asp.net/ajax/downloads/"><span style="FONT-SIZE: 10pt; LINE-HEIGHT: 115%"><font color="#0000ff">ASP.NET AJAX Library</font></span></a></span> and <span style="FONT-SIZE: 9pt; LINE-HEIGHT: 115%"><a href="http://www.asp.net/ajax/downloads/"><span style="FONT-SIZE: 10pt; LINE-HEIGHT: 115%"><font color="#0000ff">ASP.NET Control Toolkit</font></span></a></span>. 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).</font></font></div> <div style="BACKGROUND: white; MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">All the tips shown below have been created using Version 3.0.20229 (targeting .NET Framework 3.5 and Visual Studio 2008).</font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 1: How to Create a ASP.NET AJAX TabContainer with Tab Panels</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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.</font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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:</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="BACKGROUND: yellow; FONT-FAMILY: 'Courier New'"><%</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">@</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: #a31515">Page</span> <span style="COLOR: red">Language</span><span style="COLOR: blue">="C#"</span> <span style="COLOR: red">AutoEventWireup</span><span style="COLOR: blue">="true"</span> <span style="COLOR: red">CodeFile</span><span style="COLOR: blue">="Default.aspx.cs"</span> <span style="COLOR: red">Inherits</span><span style="COLOR: blue">="_Default"</span> <span style="BACKGROUND: yellow">%></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="BACKGROUND: yellow; FONT-FAMILY: 'Courier New'"><%</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">@</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: #a31515">Register</span> <span style="COLOR: red">assembly</span><span style="COLOR: blue">="AjaxControlToolkit"</span> <span style="COLOR: red">namespace</span><span style="COLOR: blue">="AjaxControlToolkit"</span> <span style="COLOR: red">tagprefix</span><span style="COLOR: blue">="cc1"</span> <span style="BACKGROUND: yellow">%></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><!</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">DOCTYPE</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">html</span> <span style="COLOR: red">PUBLIC</span> <span style="COLOR: blue">"-//W3C//DTD XHTML 1.0 Transitional//EN"</span> <span style="COLOR: blue">"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">html</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">xmlns</span><span style="COLOR: blue">="http://www.w3.org/1999/xhtml"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span>Tab Container Tips & Tricks<span style="COLOR: blue"></</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">body</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">form</span> <span style="COLOR: red">id</span><span style="COLOR: blue">="form1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">div</span><span style="COLOR: blue">></span>    </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">ScriptManager</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="ScriptManager1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">ScriptManager</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabContainer</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabContainer1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">ActiveTabIndex</span><span style="COLOR: blue">="0"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">HeaderText</span><span style="COLOR: blue">="TabPanel1"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">Button</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="Button1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">Text</span><span style="COLOR: blue">="Button"</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel2"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">HeaderText</span><span style="COLOR: blue">="TabPanel2"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox2"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">Button</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="Button2"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">Text</span><span style="COLOR: blue">="Button"</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                       </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel3"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">HeaderText</span><span style="COLOR: blue">="TabPanel3"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox3"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">Button</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="Button3"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">Text</span><span style="COLOR: blue">="Button"</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabContainer</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue"><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"></</span><span style="COLOR: #a31515">div</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"></</span><span style="COLOR: #a31515">form</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">body</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">html</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 10pt"> </div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 2: How to loop through all the controls in an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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. </font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">C#</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue">protected</span> <span style="COLOR: blue">void</span> btnLoop_Click(<span style="COLOR: blue">object</span> sender, <span style="COLOR: #2b91af">EventArgs</span> e)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        AjaxControlToolkit.<span style="COLOR: #2b91af">TabContainer</span> container = (AjaxControlToolkit.<span style="COLOR: #2b91af">TabContainer</span>)TabContainer1;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue">foreach</span> (<span style="COLOR: blue">object</span> obj <span style="COLOR: blue">in</span> container.Controls)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue">if</span> (obj <span style="COLOR: blue">is</span> AjaxControlToolkit.<span style="COLOR: #2b91af">TabPanel</span>)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                AjaxControlToolkit.<span style="COLOR: #2b91af">TabPanel</span> tabPanel = (AjaxControlToolkit.<span style="COLOR: #2b91af">TabPanel</span>)obj;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue">foreach</span> (<span style="COLOR: blue">object</span> ctrl <span style="COLOR: blue">in</span> tabPanel.Controls)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue">if</span> (ctrl <span style="COLOR: blue">is</span> <span style="COLOR: #2b91af">Control</span>)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: #2b91af">Control</span> c = (<span style="COLOR: #2b91af">Control</span>)ctrl;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: blue">foreach</span> (<span style="COLOR: blue">object</span> innerCtrl <span style="COLOR: blue">in</span> c.Controls)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                            <span style="COLOR: blue">if</span> (innerCtrl <span style="COLOR: blue">is</span> System.Web.UI.WebControls.<span style="COLOR: #2b91af">TextBox</span>)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                Response.Write(((<span style="COLOR: #2b91af">TextBox</span>)innerCtrl).Text);</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    }</font></span></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">VB.NET</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">      <span style="COLOR: blue">Protected</span> <span style="COLOR: blue">Sub</span> btnLoop_Click(<span style="COLOR: blue">ByVal</span> sender <span style="COLOR: blue">As</span> <span style="COLOR: blue">Object</span>, <span style="COLOR: blue">ByVal</span> e <span style="COLOR: blue">As</span> EventArgs)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue">Dim</span> container <span style="COLOR: blue">As</span> AjaxControlToolkit.TabContainer = <span style="COLOR: blue">CType</span>(TabContainer1, AjaxControlToolkit.TabContainer)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue">For</span> <span style="COLOR: blue">Each</span> obj <span style="COLOR: blue">As</span> <span style="COLOR: blue">Object</span> <span style="COLOR: blue">In</span> container.Controls</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                  <span style="COLOR: blue">If</span> <span style="COLOR: blue">TypeOf</span> obj <span style="COLOR: blue">Is</span> AjaxControlToolkit.TabPanel <span style="COLOR: blue">Then</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: blue">Dim</span> tabPanel <span style="COLOR: blue">As</span> AjaxControlToolkit.TabPanel = <span style="COLOR: blue">CType</span>(obj, AjaxControlToolkit.TabPanel)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: blue">For</span> <span style="COLOR: blue">Each</span> ctrl <span style="COLOR: blue">As</span> <span style="COLOR: blue">Object</span> <span style="COLOR: blue">In</span> tabPanel.Controls</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                              <span style="COLOR: blue">If</span> <span style="COLOR: blue">TypeOf</span> ctrl <span style="COLOR: blue">Is</span> Control <span style="COLOR: blue">Then</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                    <span style="COLOR: blue">Dim</span> c <span style="COLOR: blue">As</span> Control = <span style="COLOR: blue">CType</span>(ctrl, Control)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                    <span style="COLOR: blue">For</span> <span style="COLOR: blue">Each</span> innerCtrl <span style="COLOR: blue">As</span> <span style="COLOR: blue">Object</span> <span style="COLOR: blue">In</span> c.Controls</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                          <span style="COLOR: blue">If</span> <span style="COLOR: blue">TypeOf</span> innerCtrl <span style="COLOR: blue">Is</span> System.Web.UI.WebControls.TextBox <span style="COLOR: blue">Then</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                                Response.Write((<span style="COLOR: blue">CType</span>(innerCtrl, TextBox)).Text)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                          <span style="COLOR: blue">End</span> <span style="COLOR: blue">If</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                                    <span style="COLOR: blue">Next</span> innerCtrl</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                              <span style="COLOR: blue">End</span> <span style="COLOR: blue">If</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: blue">Next</span> ctrl</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                  <span style="COLOR: blue">End</span> <span style="COLOR: blue">If</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue">Next</span> obj</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">      <span style="COLOR: blue">End</span> <span style="COLOR: blue">Sub</span></font></span></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">Similarly, you can use this logic to access any other control kept in the TabContainer.</font> </div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 3: How to change the back color of an ASP.NET AJAX TabContainer/ TabPanel or How to Style an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span>Tab Container Tips & Tricks<span style="COLOR: blue"></</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">style</span> <span style="COLOR: red">type</span><span style="COLOR: blue">="text/css"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: #a31515">.BackColorTab</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: red">font-family</span>:<span style="COLOR: blue">Verdana,</span> <span style="COLOR: blue">Arial,</span> <span style="COLOR: blue">Courier</span> <span style="COLOR: blue">New</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: red">font-size</span>: <span style="COLOR: blue">10px</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: red">color</span>:<span style="COLOR: blue">Gray</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: red">background-color</span>:<span style="COLOR: blue">Silver</span>; </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"></</span><span style="COLOR: #a31515">style</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">And then use this CSS in your TabContainer in the following way:</font></div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">cc1</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">:</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">TabContainer</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabContainer1"</span> </span></font><b><span style="FONT-SIZE: 11pt; COLOR: red; LINE-HEIGHT: 115%; FONT-FAMILY: 'Courier New'">CssClass</span></b><b><span style="FONT-SIZE: 11pt; COLOR: blue; LINE-HEIGHT: 115%; FONT-FAMILY: 'Courier New'">="BackColorTab"</span></b><span style="FONT-FAMILY: 'Courier New'"><font size="2"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">ActiveTabIndex</span><span style="COLOR: blue">="2"></span></font></span></div> <div style="MARGIN: 0in 0in 10pt"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><font size="2">...</font></span></div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">cc1</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">:</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">TabContainer</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">If you want to know more about styling the TabContainer, I would recommend reading this blog over </font><a href="http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx"><font face="Verdana" size="2">here</font></a></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 4: How to align a TabHeader to the center in an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">Use CSS.</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span>Tab Container Tips & Tricks<span style="COLOR: blue"></</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">style</span> <span style="COLOR: red">type</span><span style="COLOR: blue">="text/css"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: #a31515">.TabHeaderCSS</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">             <span style="COLOR: red">font-family</span>:<span style="COLOR: blue">Verdana,</span> <span style="COLOR: blue">Arial,</span> <span style="COLOR: blue">Courier</span> <span style="COLOR: blue">New</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">             <span style="COLOR: red">font-size</span>: <span style="COLOR: blue">10px</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">             <span style="COLOR: red">background-color</span>: <span style="COLOR: blue">Silver</span>;</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">             </font></span><b><span style="FONT-SIZE: 11pt; COLOR: red; FONT-FAMILY: 'Courier New'">text-align</span></b><b><span style="FONT-SIZE: 11pt; FONT-FAMILY: 'Courier New'">: <span style="COLOR: blue">center</span>;</span></b></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">             <span style="COLOR: red">cursor</span>: <span style="COLOR: blue">pointer</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"></</span><span style="COLOR: #a31515">style</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">cc1</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">:</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">TabContainer</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabContainer1"</span> <span style="COLOR: red">CssClass</span><span style="COLOR: blue">="TabHeaderCSS"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">ActiveTabIndex</span><span style="COLOR: blue">="2"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><font size="2">...</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">cc1</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">:</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">TabContainer</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 10pt"> </div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 5: How to navigate through tabs using buttons in an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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:</font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font size="2"><font face="Verdana"><u>Method 1:</u> Use the ‘ActiveTab’ property of the TabContainer</font></font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">C#</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">     <span style="COLOR: blue">protected</span> <span style="COLOR: blue">void</span> Button1_Click(<span style="COLOR: blue">object</span> sender, <span style="COLOR: #2b91af">EventArgs</span> e)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: green">// Move to Tab 2</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        TabContainer1.ActiveTab = TabContainer1.Tabs[1];</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">VB.NET</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">      <span style="COLOR: blue">Protected</span> <span style="COLOR: blue">Sub</span> Button1_Click(<span style="COLOR: blue">ByVal</span> sender <span style="COLOR: blue">As</span> <span style="COLOR: blue">Object</span>, <span style="COLOR: blue">ByVal</span> e <span style="COLOR: blue">As</span> EventArgs)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: green">' Move to Tab 2</span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            TabContainer1.ActiveTab = TabContainer1.Tabs(1)</font></span></div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">      <span style="COLOR: blue">End</span> <span style="COLOR: blue">Sub</span></font></span></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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.</font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font size="2"><font face="Verdana"><u>Method 2:</u> Replace the <asp:Button> with HTML Buttons and you can then move to the next tab with a little bit of javascript.</font></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></span></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span>Tab Container Tips & Tricks<span style="COLOR: blue"></</span><span style="COLOR: #a31515">title</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">script</span> <span style="COLOR: red">type</span><span style="COLOR: blue">="text/javascript"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue">function</span> MoveTab(num)</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    {</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        <span style="COLOR: blue">var</span> container = $find(<span style="COLOR: #a31515">'TabContainer1'</span>);</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">        container.set_activeTabIndex(num);</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    }</font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">    <span style="COLOR: blue"></</span><span style="COLOR: #a31515">script</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"> </div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"></</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">head</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span></font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">And add a button like the one shown below in each tab</font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">HeaderText</span><span style="COLOR: blue">="TabPanel1"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><b><span style="FONT-SIZE: 11pt; FONT-FAMILY: 'Courier New'">                    <span style="COLOR: blue"><</span><span style="COLOR: #a31515">input</span> <span style="COLOR: red">id</span><span style="COLOR: blue">="Button1"</span> <span style="COLOR: red">type</span><span style="COLOR: blue">="button"</span> <span style="COLOR: red">value</span><span style="COLOR: blue">="Next"</span> <span style="COLOR: red">onclick</span><span style="COLOR: blue">="MoveTab(1)"</span> <span style="COLOR: blue">/></span></span></b></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 6: How to add a Scrollbar to an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font size="2"><font face="Verdana">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 (</font><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">asp</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">:</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">Panel</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">>)</span><font face="Verdana">  inside the Tab, set the ScrollBars="Vertical" property and drop the control inside the ‘Panel’.</font></font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">HeaderText</span><span style="COLOR: blue">="TabPanel1"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    </font></span><b><span style="FONT-SIZE: 11pt; COLOR: blue; FONT-FAMILY: 'Courier New'"><</span></b><b><span style="FONT-SIZE: 11pt; COLOR: #a31515; FONT-FAMILY: 'Courier New'">asp</span></b><b><span style="FONT-SIZE: 11pt; COLOR: blue; FONT-FAMILY: 'Courier New'">:</span></b><b><span style="FONT-SIZE: 11pt; COLOR: #a31515; FONT-FAMILY: 'Courier New'">Panel</span></b><b><span style="FONT-SIZE: 11pt; FONT-FAMILY: 'Courier New'"> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="Panel1"</span> <span style="COLOR: red">ScrollBars</span><span style="COLOR: blue">="Vertical"></span></span></b></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                        <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"</span> <span style="COLOR: red">Width</span><span style="COLOR: blue">="300px"</span> <span style="COLOR: red">Height</span><span style="COLOR: blue">="30px"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span>                   </font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                    </font></span><b><span style="FONT-SIZE: 11pt; COLOR: blue; FONT-FAMILY: 'Courier New'"></</span></b><b><span style="FONT-SIZE: 11pt; COLOR: #a31515; FONT-FAMILY: 'Courier New'">asp</span></b><b><span style="FONT-SIZE: 11pt; COLOR: blue; FONT-FAMILY: 'Courier New'">:</span></b><b><span style="FONT-SIZE: 11pt; COLOR: #a31515; FONT-FAMILY: 'Courier New'">Panel</span></b><b><span style="FONT-SIZE: 11pt; COLOR: blue; FONT-FAMILY: 'Courier New'">></span></b></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">                <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">            <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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.</font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 7: How to load the TabPanels on demand</font></font></b></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">There is an excellent post by Matt Berseth over </font><a href="http://mattberseth.com/blog/2007/07/how_to_lazyload_tabpanels_with.html"><font face="Verdana" size="2">here</font></a></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><b><font size="2"><font face="Verdana">Tip 8: How to add an image in the Header of each TabPanel in an ASP.NET AJAX TabContainer</font></font></b></div> <div style="MARGIN: 0in 0in 10pt"><font size="2"><font face="Verdana">Use </font><span style="COLOR: blue; FONT-FAMILY: 'Courier New'"><</span><span style="COLOR: #a31515; FONT-FAMILY: 'Courier New'">HeaderTemplate</span><span style="COLOR: blue; FONT-FAMILY: 'Courier New'">></span><font face="Verdana">. </font></font></div> <div style="MARGIN: 0in 0in 10pt"><font face="Verdana" size="2">You can then add an image as shown below: </font></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">   <span style="COLOR: blue"><</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TabPanel1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">       <span style="COLOR: blue"><</span><span style="COLOR: #a31515">HeaderTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">           <span style="COLOR: blue"><</span><span style="COLOR: #a31515">img</span> <span style="COLOR: red">src</span><span style="COLOR: blue">="search.jpg"</span> <span style="COLOR: red">alt</span><span style="COLOR: blue">="Tab1"/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">       <span style="COLOR: blue"></</span><span style="COLOR: #a31515">HeaderTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">       <span style="COLOR: blue"><</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">           <span style="COLOR: blue"><</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span> <span style="COLOR: red">ID</span><span style="COLOR: blue">="TextBox1"</span> <span style="COLOR: red">runat</span><span style="COLOR: blue">="server"></</span><span style="COLOR: #a31515">asp</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TextBox</span><span style="COLOR: blue">><</span><span style="COLOR: #a31515">br</span> <span style="COLOR: blue">/></span></font></span></div> <div style="MARGIN: 0in 0in 0pt; LINE-HEIGHT: normal"><span style="FONT-FAMILY: 'Courier New'"><font size="2">       <span style="COLOR: blue"></</span><span style="COLOR: #a31515">ContentTemplate</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt"><span style="FONT-FAMILY: 'Courier New'"><font size="2">   <span style="COLOR: blue"></</span><span style="COLOR: #a31515">cc1</span><span style="COLOR: blue">:</span><span style="COLOR: #a31515">TabPanel</span><span style="COLOR: blue">></span></font></span></div> <div style="MARGIN: 0in 0in 10pt" align="justify"><font face="Verdana" size="2">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. </font></div> <div style="MARGIN: 0in 0in 10pt" align="justify"> </div> <div style="MARGIN: 0in 0in 10pt" align="justify"><span style="LINE-HEIGHT: 115%"><span style="FONT-SIZE: 10pt; LINE-HEIGHT: 115%; FONT-FAMILY: 'Verdana','sans-serif'" zyrmq="0" pezam="0" m08ev="0" syz0d="0">If you liked the article, <a href="http://feeds.feedburner.com/netCurryRecentArticles" type="application/rss+xml" rel="alternate"><img style="BORDER-TOP-WIDTH: 0px; BORDER-LEFT-WIDTH: 0px; BORDER-BOTTOM-WIDTH: 0px; VERTICAL-ALIGN: middle; BORDER-RIGHT-WIDTH: 0px" alt="" src="http://www.feedburner.com/fb/images/pub/feed-icon16x16.png" /></a> <a href="http://feeds.feedburner.com/netCurryRecentArticles" type="application/rss+xml" rel="alternate" zyrmq="0" pezam="0" m08ev="0" syz0d="0">Subscribe to my RSS Feed</a>.</span></span> </div> <div style="MARGIN: 0in 0in 10pt"> </div> <p><em>This article has been editorially reviewed by </em><a href="https://www.dotnetcurry.com/author/suprotim-agarwal"><em>Suprotim Agarwal.</em></a></p> <div id="csharpbook" class="col-xs-12 col-sm-12 col-md-12 col-lg-12 articletext">  <div class="col-md-3 col-sm-3 col-xs-12"> <a href="https://www.dotnetcurry.com/csharpbook" target="_blank"><img alt="Absolutely Awesome Book on C# and .NET" src="/csharpbook/images/csharp-book-ad.jpg" /></a> </div> <div class="col-md-9 col-sm-9 col-xs-12"> <p>C# and .NET have been around for a very long time, but their constant growth means there’s always more to learn.</p> <p>We at DotNetCurry are very excited to announce <strong><a href="https://www.dotnetcurry.com/csharpbook" target="_blank">The Absolutely Awesome Book on C# and .NET</a></strong>. This is a 500 pages concise technical eBook available in PDF, ePub (iPad), and Mobi (Kindle). </p><p>Organized around concepts, this Book aims to provide a concise, yet solid foundation in C# and .NET, covering <b>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</b>. 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.</p> <p><strong><a href="https://www.dotnetcurry.com/csharpbook" target="_blank" style="color:#cd282f">Click here to Explore the Table of Contents or Download Sample Chapters!<a /></strong></p> </div> </div> <div class="footerheading margin-top-20">What Others Are Reading!</div> <div class="col-xs-12 col-sm-12 col-md-12 similarauthor"> <div class="row"> <div class="col-md-12 similararticles"> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=524" style="color:#4A75AD;font-weight:normal;">Using Script reference Profiler to Improve the Performance of an ASP.NET AJAX page</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=287" style="color:#4A75AD;font-weight:normal;">ASP.NET AJAX SlideShow Extender - Some Common Tips and Tricks</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=285" style="color:#4A75AD;font-weight:normal;">Using the ASP.NET AJAX ModalPopup in an ASP.NET 3.5 Application</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=256" style="color:#4A75AD;font-weight:normal;">Executing ClientScript Before and After an Asynchronous PostBack using ASP.NET AJAX</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=230" style="color:#4A75AD;font-weight:normal;">ASP.NET AJAX CollapsiblePanelExtender - Tips and Tricks</a> <br /><br /> <a href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=227" style="color:#4A75AD;font-weight:normal;">3 Different Ways to Display Progress in an ASP.NET AJAX Application</a> <br /><br /> <span id="ctl00_MainContent_SimilarPosts1_lblCategoNam"></span> </div> </div> </div>  <div class="visible-xs visible-sm visible-md visible-lg"> <div id='dnc-bot-txtad' class="articletext"> </div> </div> <div class="socialbox"> <b>Was this article worth reading? Share it with fellow developers too. Thanks!</b> <br/>  <a class="resp-sharing-button__link" id="fbsharelink" target="_blank" aria-label="Share on Facebook"> <div class="resp-sharing-button resp-sharing-button--facebook resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M18.768,7.465H14.5V5.56c0-0.896,0.594-1.105,1.012-1.105s2.988,0,2.988,0V0.513L14.171,0.5C10.244,0.5,9.5,3.438,9.5,5.32 v2.145h-3v4h3c0,5.212,0,12,0,12h5c0,0,0-6.85,0-12h3.851L18.768,7.465z"/> </g> </svg> </div>Share on Facebook</div> </a>  <a class="resp-sharing-button__link" id="twtsharelink" target="_blank" aria-label="Share on Twitter"> <div class="resp-sharing-button resp-sharing-button--twitter resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M23.444,4.834c-0.814,0.363-1.5,0.375-2.228,0.016c0.938-0.562,0.981-0.957,1.32-2.019c-0.878,0.521-1.851,0.9-2.886,1.104 C18.823,3.053,17.642,2.5,16.335,2.5c-2.51,0-4.544,2.036-4.544,4.544c0,0.356,0.04,0.703,0.117,1.036 C8.132,7.891,4.783,6.082,2.542,3.332C2.151,4.003,1.927,4.784,1.927,5.617c0,1.577,0.803,2.967,2.021,3.782 C3.203,9.375,2.503,9.171,1.891,8.831C1.89,8.85,1.89,8.868,1.89,8.888c0,2.202,1.566,4.038,3.646,4.456 c-0.666,0.181-1.368,0.209-2.053,0.079c0.579,1.804,2.257,3.118,4.245,3.155C5.783,18.102,3.372,18.737,1,18.459 C3.012,19.748,5.399,20.5,7.966,20.5c8.358,0,12.928-6.924,12.928-12.929c0-0.198-0.003-0.393-0.012-0.588 C21.769,6.343,22.835,5.746,23.444,4.834z"/> </g> </svg> </div>Share on Twitter</div> </a>  <a class="resp-sharing-button__link" id="linkdinsharelink" target="_blank" aria-label="Share on LinkedIn"> <div class="resp-sharing-button resp-sharing-button--linkedin resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg xmlns="https://www.w3.org/2000/svg" viewBox="0 0 24 24"><path d="M6.5 21.5h-5v-13h5v13zM4 6.5C2.5 6.5 1.5 5.3 1.5 4s1-2.4 2.5-2.4c1.6 0 2.5 1 2.6 2.5 0 1.4-1 2.5-2.6 2.5zm11.5 6c-1 0-2 1-2 2v7h-5v-13h5V10s1.6-1.5 4-1.5c3 0 5 2.2 5 6.3v6.7h-5v-7c0-1-1-2-2-2z"/></svg> </div>Share on LinkedIn</div> </a>  <a class="resp-sharing-button__link" id="googsharelink" target="_blank" aria-label="Share on Google+"> <div class="resp-sharing-button resp-sharing-button--google resp-sharing-button--large"><div aria-hidden="true" class="resp-sharing-button__icon resp-sharing-button__icon--solid"> <svg version="1.1" x="0px" y="0px" width="24px" height="24px" viewBox="0 0 24 24" enable-background="new 0 0 24 24" xml:space="preserve"> <g> <path d="M11.366,12.928c-0.729-0.516-1.393-1.273-1.404-1.505c0-0.425,0.038-0.627,0.988-1.368 c1.229-0.962,1.906-2.228,1.906-3.564c0-1.212-0.37-2.289-1.001-3.044h0.488c0.102,0,0.2-0.033,0.282-0.091l1.364-0.989 c0.169-0.121,0.24-0.338,0.176-0.536C14.102,1.635,13.918,1.5,13.709,1.5H7.608c-0.667,0-1.345,0.118-2.011,0.347 c-2.225,0.766-3.778,2.66-3.778,4.605c0,2.755,2.134,4.845,4.987,4.91c-0.056,0.22-0.084,0.434-0.084,0.645 c0,0.425,0.108,0.827,0.33,1.216c-0.026,0-0.051,0-0.079,0c-2.72,0-5.175,1.334-6.107,3.32C0.623,17.06,0.5,17.582,0.5,18.098 c0,0.501,0.129,0.984,0.382,1.438c0.585,1.046,1.843,1.861,3.544,2.289c0.877,0.223,1.82,0.335,2.8,0.335 c0.88,0,1.718-0.114,2.494-0.338c2.419-0.702,3.981-2.482,3.981-4.538C13.701,15.312,13.068,14.132,11.366,12.928z M3.66,17.443 c0-1.435,1.823-2.693,3.899-2.693h0.057c0.451,0.005,0.892,0.072,1.309,0.2c0.142,0.098,0.28,0.192,0.412,0.282 c0.962,0.656,1.597,1.088,1.774,1.783c0.041,0.175,0.063,0.35,0.063,0.519c0,1.787-1.333,2.693-3.961,2.693 C5.221,20.225,3.66,19.002,3.66,17.443z M5.551,3.89c0.324-0.371,0.75-0.566,1.227-0.566l0.055,0 c1.349,0.041,2.639,1.543,2.876,3.349c0.133,1.013-0.092,1.964-0.601,2.544C8.782,9.589,8.363,9.783,7.866,9.783H7.865H7.844 c-1.321-0.04-2.639-1.6-2.875-3.405C4.836,5.37,5.049,4.462,5.551,3.89z"/> <polygon points="23.5,9.5 20.5,9.5 20.5,6.5 18.5,6.5 18.5,9.5 15.5,9.5 15.5,11.5 18.5,11.5 18.5,14.5 20.5,14.5 20.5,11.5 23.5,11.5 "/> </g> </svg> </div>Share on Google+</div> </a>  </div> <br /> <div class="col-xs-12 col-sm-12 col-md-12 similarauthor"> <div class="row footerheading">Author</div> <div class="row"> <div class="col-md-12"> <div class="col-md-12 author-wrap img-rounded"> <div class="author-image thumbnail"> <img id="ctl00_MainContent_authorInfo_imgAuthor" onerror="this.onload = null; this.src='/images/authors/NoImage.jpg';" src="images/authors/Suprotim%20Agarwal.jpg" style="border-width:0px;" /> </div> <div class="author-desc caption"> Suprotim Agarwal, MCSD, MCAD, MCDBA, MCSE, is the founder of <a href='http://www.dotnetcurry.com'>DotNetCurry</a>, <a href='http://www.dotnetcurry.com/magazine'>DNC Magazine for Developers</a>, <a href='http://www.sqlservercurry.com' target='_blank'>SQLServerCurry</a> and <a href='http://www.devcurry.com' target='_blank'>DevCurry</a>. He has also authored a couple of books <a href='http://www.dotnetcurry.com/order/jQueryASPNETRecipesBook.aspx'>51 Recipes using jQuery with ASP.NET Controls</a> and <a href='http://www.jquerycookbook.com' target='_blank'>The Absolutely Awesome jQuery CookBook</a>.<p></p><p>Suprotim has received the prestigious <a href='https://mvp.microsoft.com/en-US/Overview'>Microsoft MVP award</a> 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.</p><p>Get in touch with him on Twitter @<a href='http://twitter.com/suprotimagarwal' target='_blank'>suprotimagarwal</a> or at <a href='https://www.linkedin.com/in/suprotimagarwal'>LinkedIn</a></p> </div> </div> </div> </div> </div> </div>  <div class="marginspace"> <div id='ban-pos-9-90'></div> <div id='ban-pos-10-90'></div> <div id='ban-pos-11-90'></div> </div> <br /><br /> <div class="col-xs-12 col-sm-12 col-md-12"> <img src="/images/copyscape.gif" alt="Page copy protected against web site content infringement by Copyscape" title="Do not copy content from the page. Plagiarism will be detected by Copyscape." height="16" border="0"/> </div> <br /><br /> <br /> <hr /> <div id="ctl00_MainContent_panComments" class="col-md-12 spacer"> <div class="footerheading">Feedback - Leave us some adulation, criticism and everything in between!</div> <ul class="tabHeader"> <li><a class="show-comments" href="#t1">Click here to post your Comments</a> </li> <li><a href="#t2">Old Comments (Read Only)</a> </li> </ul> <div class="tabContent"> <div id="t1" class="col-md-12 column"> <div id="disqus_thread"></div>  </div> <div id="t2"> <table id="ctl00_MainContent_dlstComments" class="table col-xs-4 col-sm-6 col-md-12" cellspacing="0" border="0" style="color:#333333;border-collapse:collapse;"> <tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl00_lnkAddedBy" style="color:#6592C6;">Sivaram</span> on Wednesday, July 23, 2008 12:14 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Great article.I am Searching  5th Tip for long time But goit Now Thanks .Nice Post </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl01_lnkAddedBy" style="color:#6592C6;">krishna</span> on Wednesday, July 23, 2008 1:26 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hello Sir <br>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. <br> <br>Thanks <br>Krishna </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl02_lnkAddedBy" style="color:#6592C6;">Vlad</span> on Wednesday, July 23, 2008 2:57 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Great article! <br>Would like to hear more about tab (like how to change the tabs text on the fly...) <br> <br>p.s. The last paragraph has "Well those were some tips associated with the DropDownExtender.". You probably were thinking about something else :) </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl03_lnkAddedBy" style="color:#6592C6;">Peter</span> on Thursday, July 24, 2008 3:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi there, <br>I have a question for you. Do you know how to disable a tab? <br>ajxtcEnterprise.Tabs[1].Visible = false; <br>and <br>ajxtcEnterprise.Tabs[1].Enabled = false; <br>does not work. <br> <br>Thanks <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl04_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Thursday, July 24, 2008 12:16 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Krishna: I will keep your suggestion in mind <br> <br>Vlad: Thanks for pointing that out. The correction has been made. I will try and explore how to change the tab text. <br> <br>Peter: Try this javascript code which is to be put after the <scriptManager>. <br> <br>function DisableEnableTab(var boolVal, var tabNo) <br>{ <br>   var tab = $find('TabContainer1'); <br>   if (boolVal == true) <br>   { <br>       tab.get_tabs()[tabNo].set_enabled(false); <br>   } <br>   else <br>   { <br>        tab.get_tabs()[tabNo].set_enabled(true); <br>   } <br>} <br> <br>Call the code using this: <br><input id="btnSomething" type="button" value="EnableDisable" onclick="return DisableEnableTab(true, 0)" /> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl05_lnkAddedBy" style="color:#6592C6;">don k</span> on Tuesday, July 29, 2008 5:55 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hello, <br>Very nice article, helps me alot. <br>I have a question on your Tip5 - Method 2. <br>Your method works good, however, as soon as I move the button outside of tabpanel, I am getting an error message. <br>Have you noticed this? Or is it just me? <br> <br>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. <br> <br>thanks </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl06_lnkAddedBy" style="color:#6592C6;">don k</span> on Tuesday, July 29, 2008 6:21 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> nevermind, <br>It worked. I am not sure how or why but it is working now. <br>All I did was placed the html buttom that was inside the tabcontainer and place it outside and it starts to work. <br> <br>thanks </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl07_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Thursday, July 31, 2008 9:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Good to know that it worked for you!! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl08_lnkAddedBy" style="color:#6592C6;">jobin</span> on Sunday, August 17, 2008 2:52 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> its a gud one.. very useful piece of codes </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl09_lnkAddedBy" style="color:#6592C6;">CK</span> on Tuesday, August 26, 2008 5:38 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi.. <br> <br>i am using ajax tab container.. and there is 5 tabpanels with some 50 textboxes in each.. <br> <br>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? </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl10_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Wednesday, August 27, 2008 5:03 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> CK: Post your code over here for me to analyze and comment upon. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl11_lnkAddedBy" style="color:#6592C6;">ajay</span> on Thursday, August 28, 2008 9:21 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Your article is copied by someone here, <br>http://dotnetbest.blogspot.com/2008/08/ajax-tabcontainer-tips-and-tricks.html <br> <br>Act immedietely!!! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl12_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Friday, August 29, 2008 2:16 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl13_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Tuesday, September 16, 2008 6:24 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi Suprotim <br>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.?? </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl14_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Tuesday, September 16, 2008 9:20 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Nirav: I hope the control inside a TabPanel is greater than the width of the TabPanel. Also which browser did you test it on? </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl15_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Wednesday, September 17, 2008 6:13 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> I had followed as per ur instructions,Here is my code <br><ACTkit:TabContainer runat="server" ID="TCnr1" width="200px"   > <br> <ACTkit:TabPanel runat="server" ID="TabPanel1" > <br>  <ContentTemplate> <br>  <asp:Panel ID="pnl1" runat="server" ScrollBars="Vertical"> <br>     <asp:TextBox ID="TextBox1" runat="server"  Width="350px"></asp:TextBox></asp:Panel> <br>                </ContentTemplate> <br>            </ACTkit:TabPanel> <br>        </ACTkit:TabContainer> <br> <br> <br>I am using IExplorer.I saw it is working in Firefox,safari,Chrome also. <br>But It also shows(though inactive) horizontal scroll <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl16_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Wednesday, September 17, 2008 9:45 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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: <br> <br>       <cc1:TabContainer ID="TabContainer1" runat="server"  AutoPostBack="false" Width="200px"> <br>             <br>            <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1"> <br>                <ContentTemplate> <br>                    <asp:Panel runat="server" ID="Panel1" ScrollBars="Vertical"> <br>                        <asp:TextBox ID="TextBox1" runat="server" Width="300px" Height="30px"></asp:TextBox><br />                   <br>                    </asp:Panel> <br>                </ContentTemplate> <br>            </cc1:TabPanel> <br> </cc1:TabContainer> <br> <br>If there still exists an issue, I would gladly test it at my end. Do let me know. Thanks. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl17_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Thursday, September 18, 2008 12:35 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi <br>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. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl18_lnkAddedBy" style="color:#6592C6;">Vipin</span> on Saturday, September 20, 2008 2:20 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi, <br> <br>Its really great article but if you can add few more tips it really make it better. <br> <br>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. <br> <br>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? </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl19_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Tuesday, September 23, 2008 11:25 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. <br> <br>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: <br> <br>http://www.dotnetcurry.com/ShowArticle.aspx?ID=91 <br> <br>Once you have captured the key, in javascript do this: <br> <br>var container = $find('TabContainer1'); <br>container.set_activeTabIndex(num); <br> <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl20_lnkAddedBy" style="color:#6592C6;">Aamir</span> on Wednesday, September 24, 2008 3:42 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> I Hve an issue, My Tab container doesn`t appear in Firefox,It Wrks fine in IE. Any Help </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl21_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Monday, September 29, 2008 8:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> HI Suprotim <br>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. <br>If u r getting my problem and can suggest something then please reply soon. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl22_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Monday, September 29, 2008 10:42 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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 <br> <br>Check this link for some clues: <br>http://msdn.microsoft.com/en-us/library/bb530322.aspx </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl23_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Tuesday, September 30, 2008 2:27 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Thanks for the valuable information. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl24_lnkAddedBy" style="color:#6592C6;">Nirav</span> on Tuesday, September 30, 2008 2:55 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> One more difficulty here, <br>When I use ajax tab control,it does not allow me to write <br><link href="<%= Application("sPath") %>" rel="stylesheet" type="text/css"/> <br>which i generally use in my aspx pages.Error is something like: <br>"The Controls collection cannot be modified because the control contains code blocks (i.e. <% ... %>)." <br>Same is the case with script tag.When i use absolute path instead of <%= Application("sPath") %> it works fine.!!!!! </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl25_lnkAddedBy" style="color:#6592C6;">manish goel</span> on Wednesday, October 15, 2008 5:13 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi suprotim <br>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. <br> <br>thanks <br> <br>Manish </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl26_lnkAddedBy" style="color:#6592C6;">manish goel</span> on Wednesday, October 15, 2008 7:16 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi suprotim <br>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. <br> <br>thanks <br> <br>Manish </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl27_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Friday, October 17, 2008 6:43 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Manish: Glad to know that you liked them Manish! You can find many more AJAX articles over here <br> <br>http://www.dotnetcurry.com/BrowseArticles.aspx?CatID=59 </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl28_lnkAddedBy" style="color:#6592C6;">D K</span> on Thursday, October 23, 2008 11:01 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> I'm trying to change selectedtab progrmatically on page load and having some issues.   <br> <br>I tried prety much everything I could think of <br>here are some of the things I tried (I have 2 tabs): <br> <br>1) function SetActiveTab(tabControl, tabNumber) <br>   {           <br>         var ctrl1 = $find("ctl00_TabContainer1"); <br>         ctrl1.set_activeTab(2); <br>   } <br>2) $find('<%=TabContainer1.ClientID%>').set_activeTabIndex(2); <br> <br>3)var ctrl1 = document.getElementsByTagName("ctl00_TabContainer1"); <br>ctrl1.set_activeTab(2); <br> <br>4)var ctrl1 = document.getElementsByTagName("ctl00_TabContainer1_TabPanel1"); <br>var ctrl2 = document.getElementsByTagName("ctl00_TabContainer1_TabPanel2"); <br>ctrl1.display="none"; <br>ctrl1.visibility="hidden"; <br>ctrl2.display=""; <br>ctrl1.visibility="visible"; <br> <br>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. <br> <br>Please help <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl29_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Wednesday, October 29, 2008 12:51 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> D K: That's what Tip 5, Method 2 suggests. Use this code: <br> <br><head runat="server"> <br>    <title>Tab Container Tips & Tricks</title> <br>    <script type="text/javascript"> <br>        function pageLoad() { <br>            var container = $find('TabContainer1'); <br> <br>            container.set_activeTabIndex(2); <br>        } <br>    </script> <br></head> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl30_lnkAddedBy" style="color:#6592C6;">babu</span> on Friday, October 31, 2008 6:12 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl31_lnkAddedBy" style="color:#6592C6;">anil reddy y</span> on Monday, December 1, 2008 5:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. <br> <br>thank you <br>anil </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl32_lnkAddedBy" style="color:#6592C6;">ravi4dotnet</span> on Thursday, December 11, 2008 12:49 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi <br>    what is url REWRITING. Please give me answer with an exemple. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl33_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Friday, December 12, 2008 12:37 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Anil: In javascript, you could use this: <br> <br>var container = $find('TabContainer1'); <br>var activeTab = container.get_activeTabIndex(); <br> <br> <br>Ravi: UrlRewriting has been explained over here: <br> <br>http://msdn.microsoft.com/en-us/library/ms972974.aspx <br>http://weblogs.asp.net/scottgu/archive/2007/02/26/tip-trick-url-rewriting-with-asp-net.aspx </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl34_lnkAddedBy" style="color:#6592C6;">Robert Hellestrae</span> on Tuesday, December 16, 2008 9:22 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Fantastic article, and I have been working with the AJAX TabContainer for several weeks! </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl35_lnkAddedBy" style="color:#6592C6;">Suprotim Agarwal</span> on Tuesday, December 16, 2008 10:11 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Thanks Robert! Glad that you liked it. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl36_lnkAddedBy" style="color:#6592C6;">Derek Brown</span> on Monday, December 22, 2008 10:15 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> multiple rows with ajax tabcontainer.... <br> <br> <br>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. <br> <br>public void AddTabs(String PageFile, int CMSAdministratorId, int WebsiteId, Boolean IsNewTabOnly) <br>{ <br>int i = 0; <br>String sProc = “usp_sel_SomeStoreProc”; <br>SqlParameter[] sp = new SqlParameter[1]; <br>sp[0] = new SqlParameter(”@Param1″, _Param1); <br>SqlDataReader dr = DatabaseCalls.ExecuteReader(DatabaseConnections.GetConnectionString(CMSUtility.Databases.MyDatabase), sProc, sp); <br>while (dr.Read()) <br>{ <br>i += 1; <br>AddTab(dr["ControlPath"].ToString(), dr["TabName"].ToString(), i); <br> <br>} <br>dr.Close(); <br> <br>for (int j = 1; j <= _rowCount; j++) <br>{ <br>TabPanel tp2 = new TabPanel(); <br>tp2.HeaderText = “&lt;/div&gt;”; <br>tp2.ID = “TabsClose” + j.ToString(); <br>tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”; <br>tp2.Visible = false; <br> <br>BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”); <br>tp2.Controls.Add(bctl2); <br>Tabs.Add(tp2); <br>} <br> <br>SetActiveTabIndex(0); <br>} <br>private void AddTab(String BaseControlPath, String TabName, int TabIndex) <br>{ <br>TabPanel tp = new TabPanel(); <br>tp.HeaderText = TabName; <br>tp.ID = “Tabs” + TabIndex.ToString(); <br>BaseControl bctl = (BaseControl)TemplateControl.LoadControl(BaseControlPath); <br>tp.Controls.Add(bctl); <br>Tabs.Add(tp); <br> <br>int remainder = (TabIndex - 1) % 10; <br>if (remainder == 0) <br>{ <br>_rowCount += 1; <br> <br>TabPanel tp2 = new TabPanel(); <br>tp2.HeaderText = “&lt;div style=’clear:both;’&gt;”; <br>tp2.ID = “TabsBR” + TabIndex.ToString(); <br>tp2.Style.Value = “border:none; background-color: white; width:0px; padding: 0 0 0 0;”; <br>tp2.Visible = false; <br>BaseControl bctl2 = (BaseControl)TemplateControl.LoadControl(”~/Controls/tabspacer.ascx”); <br>tp2.Controls.Add(bctl2); <br>Tabs.Add(tp2); <br>} <br>} <br> <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl37_lnkAddedBy" style="color:#6592C6;">Derek Brown</span> on Monday, December 22, 2008 10:21 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> setting activetab index... <br> <br> <br>//////on the aspx... <br>        <asp:HiddenField ID="activeTab" runat="server" /> <br>        <script type="text/javascript"> <br>            function ActiveTabChanged(sender, e) { <br>                var activeTab = $get('<%=activeTab.ClientID%>'); <br>                activeTab.value = sender.get_activeTabIndex(); <br>                SetActiveTabIndexCookie(activeTab.value); <br>            } <br>        </script> <br>        <MyControls:SuperTabContainer runat="server" id="SuperTabContainer1" OnClientActiveTabChanged = "ActiveTabChanged";  /> <br> <br> <br>//////on aspx page_load... <br>protected void Page_Load(object sender, EventArgs e) <br>        { <br> <br>            int ActiveTabIndex = 0; <br>            if (Request.Cookies["activetabindex"] != null) <br>            { <br>                try <br>                { <br>                    ActiveTabIndex = int.Parse(Request.Cookies["activetabindex"].Value.ToString()); <br>                } <br>                catch <br>                { ActiveTabIndex = 0; } <br>            } <br> <br> <br>            if (ActiveTabIndex > SuperTabContainer1.Tabs.Count || ActiveTabIndex <= 0) <br>            { <br>                SuperTabContainer1.ActiveTabIndex = 0; <br>            } <br>            else <br>            { <br>                SuperTabContainer1.ActiveTabIndex = ActiveTabIndex; <br>            } <br> <br>            HttpCookie cookie = new HttpCookie("activetabindex"); <br>            cookie.Value = SuperTabContainer1.ActiveTabIndex.ToString(); <br>            Response.Cookies.Add(cookie); <br> <br>        } <br> <br> <br> <br>//////javascript ref from aspx... <br>function SetActiveTabIndexCookie(cvalue) { <br>    if(document.cookie != document.cookie) <br>    { <br>        index = document.cookie.indexOf(cookie_name); <br>    } <br>    else <br>    { <br>        index = -1; <br>    } <br> <br>    if (index == -1) <br>    { <br>        document.cookie = 'activetabindex=' + cvalue + ";"; <br>    } <br>} <br> <br> <br>     <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl38_lnkAddedBy" style="color:#6592C6;">Robert Werner</span> on Tuesday, December 23, 2008 4:39 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl39_lnkAddedBy" style="color:#6592C6;">Ben</span> on Thursday, January 15, 2009 10:22 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Thanks for this last post. I converted it to VB and it worked perfectly. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl40_lnkAddedBy" style="color:#6592C6;">Wade</span> on Monday, February 2, 2009 2:32 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl41_lnkAddedBy" style="color:#6592C6;">Wade</span> on Monday, February 2, 2009 2:56 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl42_lnkAddedBy" style="color:#6592C6;">Airborne</span> on Tuesday, March 3, 2009 4:24 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> How do you get multiple rows with just using CSS?   <br> <br>I tried adding this to my page... <br> <br><style type="text/css"> <br>    .ajax__tab_xp .ajax__tab_header <br>   { <br>    white-space:normal; <br>   } <br></style> <br> <br>But it didn't work </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl43_lnkAddedBy" style="color:#6592C6;">Nikhar</span> on Friday, May 8, 2009 12:54 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hey nice article. i have a releted problem i think.. <br>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... </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl44_lnkAddedBy" style="color:#6592C6;">Amol</span> on Thursday, June 4, 2009 9:38 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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 </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl45_lnkAddedBy" style="color:#6592C6;">Greg</span> on Friday, July 17, 2009 11:38 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl46_lnkAddedBy" style="color:#6592C6;">Santosh</span> on Thursday, November 5, 2009 1:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl47_lnkAddedBy" style="color:#6592C6;">Rich</span> on Friday, November 13, 2009 6:46 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> [quote]Comment posted by Amol on Thursday, June 04, 2009 9:38 AM    <br>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] <br> <br>Did you find a fix to this because this I have the same problem and it's driving me NUTS! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl48_lnkAddedBy" style="color:#6592C6;">luis</span> on Thursday, November 26, 2009 4:42 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> como puedo trabnajar un tabs, si quiero saber si hay datos en el tabs anterior </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl49_lnkAddedBy" style="color:#6592C6;">Abdur Rafay</span> on Thursday, December 10, 2009 4:16 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. <br>How ever I just modified the Java script a bit and Thankfully issue was resolved.. <br>The JavaScript I used was.. <br><script type="text/javascript"> <br>    function MoveTab(num) { <br>        var container = $find('<%= TabContainer1.ClientID %>'); <br>        container.set_activeTabIndex(num); <br>    } <br> </script> <br> <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl50_lnkAddedBy" style="color:#6592C6;">o;oi</span> on Monday, January 11, 2010 8:32 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> opopiop </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl51_lnkAddedBy" style="color:#6592C6;">Diesel</span> on Wednesday, January 20, 2010 6:30 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl52_lnkAddedBy" style="color:#6592C6;">James Wang</span> on Monday, January 25, 2010 2:31 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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? <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl53_lnkAddedBy" style="color:#6592C6;">How to call javascript code from server side while using AJAX</span> on Wednesday, April 21, 2010 2:48 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> How to call javascript code from server side while using AJAX </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl54_lnkAddedBy" style="color:#6592C6;">ikram</span> on Sunday, September 5, 2010 6:46 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> i execute your code adjust but the message during runtime appear : <br>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."); <br>please help me <br>with my regard </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl55_lnkAddedBy" style="color:#6592C6;">abhishek</span> on Saturday, December 4, 2010 5:22 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> ada </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl56_lnkAddedBy" style="color:#6592C6;">Rajesh</span> on Tuesday, December 7, 2010 3:53 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> good yaar nice article </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl57_lnkAddedBy" style="color:#6592C6;">darshan</span> on Wednesday, December 15, 2010 5:58 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi, <br>I have used the tab container and 3 tab panels in it. <br>I have a post back happening in each of tabs at some point of time. <br>each time of post back the first tabpanel is displayed. <br>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. <br>but the function  for OnActiveTabChange is never called when i change from 1 tab panel to another.   <br>How does this event trigger? <br>is there any alternate solution ? </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl58_lnkAddedBy" style="color:#6592C6;">pavan</span> on Monday, December 20, 2010 5:34 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> What is Control?,i am not able to find the Control.. <br>Control c = (Control)ctrl; </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl59_lnkAddedBy" style="color:#6592C6;">JeffKish</span> on Saturday, February 5, 2011 3:29 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi there. Good article. <br>Still it didn't help in my case because I am generating the tabs dynamically. Therefore, I can not use the method you use. <br>I created the CssClass and tried it without any success. <br>Here is the code: <br>----- <br>For i = 0 To dtTable.Rows.Count - 1 <br>  Dim tabpanel As New AjaxControlToolkit.TabPanel <br>  tabpanel.HeaderText = dtTable.Rows(i).Item(0) <br>  tabpanel.ID = Replace(dtTable.Rows(i).Item(0), " ", "") <br>  tabpanel.CssClass = "BackColorTab" 'I have also tried tabpanel.BackColor = Drawing.Color.Red, but of course did not work either <br>  tbcDynamic.Tabs.Add(tabpanel) <br>Next <br>phNCDR.Controls.Add(tbcDynamic) <br>----------------------   <br> <br>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... <br>So, it is quite critical to be able to control the color of the tab on the fly. <br> <br>Thanks, <br>JeffKish </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl60_lnkAddedBy" style="color:#6592C6;">sandeep</span> on Friday, May 20, 2011 10:06 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi, i am using it in framework 3.5. For some reason they are not getting visible. <br>It auto insert "visibility:hidden;" style. <br> <br>Thanks, <br>Sandeep </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl61_lnkAddedBy" style="color:#6592C6;">Brabbeldas</span> on Tuesday, July 19, 2011 12:14 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Great article! I helped me getting started! <br> <br>I was hoping you could help me with the following: <br>My code dynamically created TabPanels and adds these to the TabContainer. The code also sets the HeaderTemplate and ContentTemplate like this: <br> <br>// Create TabContainer // <br>TabContainer tabContainer = new TabContainer(); <br> <br>// Prepare templates <br>ITemplate contentTemplate = Page.LoadTemplate("TemplateTabContent.ascx"); <br>ITemplate headerTemplate = Page.LoadTemplate("TemplateTabHeader.ascx"); <br> <br>// Create Tab, with templates   <br>TabPanel newTab1 = new TabPanel(); <br>newTab1.ContentTemplate = contentTemplate; <br>newTab1.HeaderTemplate = headerTemplate; <br> <br>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: <br>- The controls which are on the templates are not part of the Tab.Controls collection as Tab.Controls.Count = 0. <br> <br>- 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. <br> <br> <br>Do you know how to do this? Or maybe a workaround to accomplish the same in a different way? <br>Please also see my post here: <br>http://forums.asp.net/t/1701468.aspx/1?Find+controls+inside+a+TabPanel+s+ContentTemplate+and+HeaderTemplate <br> <br>Thanks in advance! Bas <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl62_lnkAddedBy" style="color:#6592C6;">vishal</span> on Tuesday, October 25, 2011 6:11 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi....i want to add new tab in tab container when i click on + button </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl63_lnkAddedBy" style="color:#6592C6;">Ashish J</span> on Wednesday, November 23, 2011 3:21 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> AjaxCtrl:TabContainer the ActiveTabChanged event shows incorrect ActiveTabIndex <br> <br>Solution: <br>1. Register the clientside event of the tab container: <br>OnClientActiveTabChanged="Tab_SelectionChanged" <br>2. Then define the javascript function to handle the above event which will internally store the tab index in a hidden variable. <br>function Tab_SelectionChanged(sender,e)  { <br>        document.getElementById('<%=hdntabIndex.ClientID %>').value =  sender.get_activeTabIndex(); } <br>3. Use the hidden variable in the code behind where ever you need the antive tab index. <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl64_lnkAddedBy" style="color:#6592C6;">Ahmad</span> on Thursday, December 8, 2011 2:18 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi, this article is very nice and I have a question. How I can hide whole Ajax tab container on demand <br>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. <br> <br>At radiobutton_SelectedIndexChanged event I am using following condition but that is not working <br> <br>protected void radiobutton_SelectedIndexChanged(object sender, EventArgs e) <br>{ <br>if (SelectedOption == 3) <br>    { <br>          this.ajaxTabFoldoverBusinessCard.Visible = true; <br>    } <br>else <br>    { <br>           this.ajaxTabFoldoverBusinessCard.Visible = false; <br>    } <br>} <br> <br>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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl65_lnkAddedBy" style="color:#6592C6;">Guruprasad</span> on Saturday, December 31, 2011 8:11 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> for me,<asp:ToolkitScriptManager ID="id" runat="server"></asp:ToolkitScriptManager> is working. now what you described in your code <asp:scriptmanager> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl66_lnkAddedBy" style="color:#6592C6;">swapnil</span> on Wednesday, February 15, 2012 2:37 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> I am trying to Load the content inside the tab panel dynamically (generating controls on the fly). <br>This works fine. <br> <br>Now What I need is, I need to fire a javascript function whenever user navigates to the third tab. <br>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. <br>As soon as I write onclientClick="Functionname();" , The Tab panel contet stops to load. <br> <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl67_lnkAddedBy" style="color:#6592C6;">James</span> on Tuesday, February 28, 2012 10:27 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi, i have a question. <br>everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8. <br> <br>is there something i have to add to the code? <br>thank you! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl68_lnkAddedBy" style="color:#6592C6;">James</span> on Tuesday, February 28, 2012 10:44 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi, i have a question. <br>everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8. <br> <br>is there something i have to add to the code? <br>thank you! </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl69_lnkAddedBy" style="color:#6592C6;">James</span> on Tuesday, February 28, 2012 11:04 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> hi, i have a question. <br>everything is working on visual studio, but my tabcontainer is not showing on my browers, i tested it on chrome and IE8. <br> <br>is there something i have to add to the code? <br>thank you! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl70_lnkAddedBy" style="color:#6592C6;">Parin Shah</span> on Monday, March 19, 2012 1:38 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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? </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl71_lnkAddedBy" style="color:#6592C6;">parin shah</span> on Monday, March 19, 2012 1:42 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> hello james, drag and drop the script manager into your page and run the project. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl72_lnkAddedBy" style="color:#6592C6;">raj</span> on Tuesday, April 3, 2012 1:45 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> how to use link button in ajax tab container <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl73_lnkAddedBy" style="color:#6592C6;">arya</span> on Thursday, April 5, 2012 7:24 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi Suprotim, <br>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. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl74_lnkAddedBy" style="color:#6592C6;">adrian</span> on Thursday, May 10, 2012 5:52 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl75_lnkAddedBy" style="color:#6592C6;">zcv</span> on Monday, June 18, 2012 4:21 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> asdfasdfasd </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl76_lnkAddedBy" style="color:#6592C6;">AdrianK</span> on Friday, October 12, 2012 4:35 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hello! <br> <br>Can you advise me/give me a tip on how to load the content only for the active tabpanel in a tabcontainer? <br>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)... <br> <br>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... <br> <br>Thank you in advance! <br>Adi </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl77_lnkAddedBy" style="color:#6592C6;">sushant</span> on Monday, November 19, 2012 3:18 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. <br>$find(TabControl).get_tabs()[1].set_enabled(false); </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl78_lnkAddedBy" style="color:#6592C6;">Ross</span> on Monday, February 18, 2013 5:34 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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? <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl79_lnkAddedBy" style="color:#6592C6;">srinivasa</span> on Monday, April 1, 2013 2:32 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> I want to tab container with multiple gridviews using freeze panes at same time every gridviews freeze panes.please help me </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl80_lnkAddedBy" style="color:#6592C6;">Hammad Khan</span> on Wednesday, April 17, 2013 12:01 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Thank you so much for the code. Your code is working gr8 :) </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl81_lnkAddedBy" style="color:#6592C6;">fggfdgf</span> on Tuesday, April 23, 2013 7:34 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> gfgffffffffffffffffffffffff </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl82_lnkAddedBy" style="color:#6592C6;">surekha</span> on Wednesday, July 31, 2013 4:52 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> tried <br>  <style type="text/css"> <br>        .BackColorTab <br>        { <br>            font-family:Verdana, Arial, Courier New; <br>            font-size: 10px; <br>            color:Gray; <br>            background-color:Silver; <br>        } <br>    </style> <br> <br>& applied the css to the tab thr' code as tbconatiner.tabs.item(0).cssclass="BackColorTab" <br>but the tabpanel color doesnot change </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl83_lnkAddedBy" style="color:#6592C6;">shanthi</span> on Wednesday, August 28, 2013 11:07 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hi Sir, <br>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. <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl84_lnkAddedBy" style="color:#6592C6;">dms</span> on Wednesday, October 9, 2013 12:42 PM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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? <br> <br>I need to have separate pages to authenticate users - only certain users will be eligable to certain content in tabpanels. <br> <br> </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl85_lnkAddedBy" style="color:#6592C6;">Ahmed</span> on Wednesday, January 29, 2014 6:59 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Superb! Thanks! </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl86_lnkAddedBy" style="color:#6592C6;">aarthy</span> on Friday, August 8, 2014 3:49 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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. </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl87_lnkAddedBy" style="color:#6592C6;">Aarthy</span> on Thursday, August 14, 2014 4:47 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Sir Pls Reply To My Post, Its urgent. </div> </td> </tr><tr> <td style="color:#333333;background-color:#EFEFE3;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl88_lnkAddedBy" style="color:#6592C6;">ram</span> on Monday, September 8, 2014 1:54 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> 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 </div> </td> </tr><tr> <td style="color:#333333;background-color:White;"> <div> <table class="table"> <tr><td class="row"> <b>Comment posted by <span id="ctl00_MainContent_dlstComments_ctl89_lnkAddedBy" style="color:#6592C6;">Anil Kumar</span> on Thursday, September 11, 2014 7:40 AM </b> </td> <td style="text-align: right;"> </td></tr> </table> Hello Sir, <br> <br>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. </div> </td> </tr><tr> <td style="color:White;background-color:#990000;font-weight:bold;"> </td> </tr> </table> </div>  </div>  </div>   </div> <div id="rightcol" class="col-md-4">  <div class="margin-vertical-20" /> <div class="side-widget"> <div class="featured-tools"> <span>Featured Tools</span> <div id="creatives"> <div id='ban-pos-1' style='display: none'> </div> <div id='ban-pos-2'> <div class="padding-vertical-10"></div> </div> <div id='ban-pos-3'> </div> <div class="padding-vertical-10"></div> <div id='ban-pos-4-250'> </div> <div id='ban-pos-5-250'> </div> <div id='ban-pos-6-250'> </div> </div> </div> </div> <div class="sec-title"> <h4>Categories</h4> </div> <div class="side-widget"> <ul id="toggle-view"> <li> <h3>.NET Web</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-ajax">ASP.NET AJAX</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> </div> </div> </li> <li> <h3>.NET Framework, Visual Studio and C#</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a> </div> </div> </li> <li> <h3>Patterns & Practices</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> <a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a> </div> </div> </li> <li> <h3>Cloud and Mobile</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a> <a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a> <a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a> <a href="https://www.dotnetcurry.com/tutorials/windowsphone">Windows Phone</a> </div> </div> </li> <li> <h3>JavaScript</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/typescript">TypeScript</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/nodejs">Node.js</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5 & JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">Bootstrap & CSS</a> </div> </div> </li> <li> <h3>.NET Desktop</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a> </div> </div> </li> <li> <h3>Interview Questions & Product Reviews</h3> <span class="fa fa-angle-down"></span> <div class="toggle-panel"> <div> <a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a> <a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a> </div> <div> <a href="https://www.dotnetcurry.com/tutorials/general-programming-topics">General Topics</a> </div> </div> </li> </ul> </div> <div class="sec-title"> <h3><b>JOIN OUR COMMUNITY</b></h3> </div> <div class="side-widget"> <div class="side-social"> <a href="https://www.facebook.com/dotnetcurry"><i class="fa fa-facebook"></i> 50K+ <span>fans</span></a> <a href="https://www.twitter.com/dotnetcurry"><i class="fa fa-twitter"></i> 8K+ <span>followers</span></a> <a href="https://www.dotnetcurry.com/magazine/"><i class="fa fa-envelope"></i> 128K+ <span>subscribers</span></a> </div> </div> <div class="sec-title"> <h3><b>POPULAR ARTICLES</b></h3> </div> <div id="latestart" class="side-widget"> <div> <a id="ctl00_toplat_Repeater1_ctl00_lnkTitle" class="top" href="http://www.dotnetcurry.com/ShowArticle.aspx?ID=1608" style="color:#4A75AD;font-weight:normal;">What's New for ASP.NET Core & Blazor in .NET 9</a> <br /> <br /> <br /> </div> </div> <div id='ban-pos-7-600'> </div> <div id='ban-pos-8-600'> </div> <div class="sec-title-plain"> <h4>Tags</h4> </div> <div class="side-widget"> <div class="tags"> <a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a> <a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a> <a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a> <a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a> <a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a> <a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a> <a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a> <a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a> <a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a> <a href="https://www.dotnetcurry.com/tutorials/windows-azure">Azure</a> <a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a> <a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular.js</a> <a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a> <a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">JavaScript</a> <a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5</a> <a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Core</a> <a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a> </div> </div> <div class="sec-title"> <h3><b>JQUERY COOKBOOK</b></h3> </div> <div class="side-widget"> <a href="http://www.jquerycookbook.com"><img src="https://www.dotnetcurry.com/images/books/300x300-jqckbk.png" alt="jQuery CookBook" /></a> </div> </div> </div> </div>  </div>  <footer class="margin-top-30"> <div class="container"> <div class="footer-head"> <div class="row center-content"> <div class="col-md-2 col-sm-3"> <a href="https://www.dotnetcurry.com"> <img data-src="/img/dnc-logo-tee-trans.png" class="img-responsive lazyload" alt="" /> </a> </div> <div class="col-md-6 col-sm-4"> <p></p> </div>  </div> </div> <div class="footer-content"> <div class="row"> <div class="col-sm-2"> <h5 class="text-white">Server-Side</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet">ASP.NET</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet-core">ASP.NET Core</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/aspnet-mvc">ASP.NET MVC</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/wcf">WCF</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/sharepoint">SharePoint</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Client-side</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/angularjs">Angular.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/reactjs">React.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/jquery-aspnet">jQuery</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/backbonejs">Backbone.js</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/html5-javascript">HTML5</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/bootstrap-css">CSS</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">.NET</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/csharp">C#</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/visualstudio">Visual Studio</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/vsts-tfs">VSTS & TFS</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/linq">LINQ</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/entityframework">Entity Framework</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnetframework">.NET Framework</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnet-standard-core">.NET Standard & .NET Core</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/wpf">WPF</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/winforms">WinForms</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Cloud and Mobile</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/windows-azure">Microsoft Azure</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/devops">DevOps</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/xamarin">Xamarin</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/powershell">Powershell</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/machine-learning-ai">Machine Learning & AI</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/windows-store">UWP & Windows Store</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/windowsphone">Windows Phone</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Skill Up</h5> <ul class="footer-links"> <li><a href="https://www.dotnetcurry.com/tutorials/patterns-practices">Design Patterns</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/software-gardening">Software Gardening</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/dotnetinterview">.NET Interview Q&A</a></li> <li><a href="https://www.dotnetcurry.com/magazine/" class="last">Magazines</a></li> <li><a href="http://www.jquerycookbook.com/">Books</a></li> <li><a href="https://www.dotnetcurry.com/tutorials/product-articles-review">Product Reviews</a></li> </ul> </div> <div class="col-sm-2"> <h5 class="text-white">Follow Us</h5> <ul class="footer-social"> <li><a href="https://www.facebook.com/dotnetcurry">Facebook</a></li> <li><a href="https://www.twitter.com/dotnetcurry">Twitter</a></li> <li><a href="https://github.com/dotnetcurry">Github</a></li> </ul> </div> </div> </div> <div class="footer-bottom"> <div class="row"> <div class="col-sm-6"> <p>© 2007-2023 DotNetCurry.com (A subsidiary of A2Z Knowledge Visuals Pvt. Ltd). All rights reserved.</p> </div> <div class="col-sm-6 text-right"> <ul class="list-inline"> <li><a href="https://www.dotnetcurry.com/Contact.aspx">Contact Us</a></li> <li><a href="https://www.dotnetcurry.com/WriteForUs.aspx">Write For Us</a></li> <li><a href="https://www.dotnetcurry.com/PrivacyPolicy.aspx">Privacy</a></li> <li><a href="https://www.dotnetcurry.com/terms-conditions">Terms</a></li> </ul> </div> </div> </div> </div> </footer>  </form> <script src="//ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="//js.maxmind.com/js/apis/geoip2/v2.1/geoip2.js"></script> <script src="/bundles/scriptsmin?v=ztXW8lGCJchjv7iQbaTOZjTpSGfOrLg1lKllrWansXI1"></script> <script src="/bundles/framework?v=yOkBizHgoWwNt4OFd4FauUxu9fucEJ_a4EJrci8uIGA1"></script> <script type="text/javascript"> SyntaxHighlighter.defaults['auto-links'] = false; SyntaxHighlighter.defaults['gutter'] = false; SyntaxHighlighter.defaults['toolbar'] = false; SyntaxHighlighter.all() </script> <script> $(function () { $('.tabHeader').children().first().addClass('current'); $('.tabContent').children().first().addClass('current'); $('.tabHeader li').click(function (e) { e.preventDefault(); $(this).siblings('.current').removeClass('current'); $(this).addClass('current'); $('.tabContent').children('.current').removeClass('current'); $('.tabContent').children().eq($(this).index()).addClass('current'); }); }); </script> <script src="https://ajax.googleapis.com/ajax/libs/webfont/1.5.18/webfont.js"></script> <script> WebFont.load({ google: { families: ['Hind Vadodara:300,400,500,600,700'] } }); </script> </body> </html>

CINXE.COM

ASP.NET AJAX TabContainer – Tips and Tricks | DotNetCurry