[How Do I:] Use the ASP.NET AJAX Tabs Control?http://www.asp.netThu, 15 May 2008 08:59:41 GMTumbracoComments for [How Do I:] Use the ASP.NET AJAX Tabs Control?enComment Posted by Rose123_123http://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 05 Mar 2008 01:18:54 GMT00000000-0000-0000-000000001449i want to know the dynamic creation of tabs on some events like button clicked or on selectedindexchanged of dropdownlist...

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

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlFri, 14 Mar 2008 11:14:56 GMT00000000-0000-0000-000000001450There is good news and bad news.

The good news is that tabs are easy to add.

       TabPanel[] newpanels = new TabPanel[NumNewTabs];

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

       {

       newpanels[iCnt] = new TabPanel();

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

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

       }

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

]]>Comment Posted by rhmayerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlFri, 14 Mar 2008 22:22:05 GMT00000000-0000-0000-000000001451I just downloaded the Ajax Control Toolkit 3.5 for VS 2008.  However, after loading the controls into my toolbox, I see the  TabContainer control, but not the TabPanel control which is used in the video.

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlSat, 15 Mar 2008 09:48:10 GMT00000000-0000-0000-000000001452TabContainer is the root control.

Panels are like templates inside the container.

]]>Comment Posted by mohanmothupallyhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlMon, 17 Mar 2008 03:49:07 GMT00000000-0000-0000-000000001458Hi Joe,

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

instructions on the following page:

<a rel="nofollow" target="_new" href="http://ajax.asp.net/ajaxtoolkit/Walkthrough/Setup.aspx">ajax.asp.net/.../Setup.aspx</a>

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

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

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

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

Toolbox.

The control i am making use of is tab control.

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

when i run the application, nothing gets displayed.

please find my code.

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

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

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

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

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "<a rel="nofollow" target="_new" href="http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">">www.w3.org/.../xhtml1-transitional.dtd"></a>

<html xmlns="<a rel="nofollow" target="_new" href="http://www.w3.org/1999/xhtml"">www.w3.org/.../xhtml"</a> >

<head runat="server">

   <title>Untitled Page</title>

</head>

<body>

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

   <div>before mgr

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

       </asp:ScriptManager>

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

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

           <ContentTemplate>hello</ContentTemplate>

           <HeaderTemplate>tab1</HeaderTemplate>

           </cc1:TabPanel>

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

           <ContentTemplate>hello2</ContentTemplate>

           </cc1:TabPanel>

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

           <ContentTemplate>hello3</ContentTemplate>

           </cc1:TabPanel>

       </cc1:TabContainer>

       after mgr

   </div>

   </form>

</body>

</html>

Any help is highly appreciated. Thanks in advance.

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlThu, 20 Mar 2008 17:28:03 GMT00000000-0000-0000-000000001459What DOES happen? Feel free to email me off line through my blog at www.JoeOn.net

]]>Comment Posted by assafg2http://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlSun, 23 Mar 2008 08:10:44 GMT00000000-0000-0000-000000001453i dont know why but i cant get a diffrent  bg color fot the tab's

i have try this 2 and...

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

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

<ContentTemplate>

any idea ?

]]>Comment Posted by NettaAhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 25 Mar 2008 07:47:33 GMT00000000-0000-0000-000000001454you have to use css, like here:

<a rel="nofollow" target="_new" href="http://www.asp.net/AJAX/AjaxControlToolkit/Samples/Tabs/Tabs.aspx">www.asp.net/.../Tabs.aspx</a>

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

]]>Comment Posted by NettaAhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 25 Mar 2008 07:58:42 GMT00000000-0000-0000-000000001460Hi Joe, I have a question..

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

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

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

                   <HeaderTemplate>

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

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

                               <tr>

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

                                   </td>

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

                                       bla bla

                                   </td>

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

                                   </td>

                               </tr>

                           </table>

                       </div>

                   </HeaderTemplate>

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

Thanks

]]>Comment Posted by Chris Rivardhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 25 Mar 2008 09:46:14 GMT00000000-0000-0000-000000001461Is there a way to move the tabs from the top to the bottom?  Would this be via CSS?  If so, could you provide an example.  Thanks!

]]>Comment Posted by fizchhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlMon, 31 Mar 2008 11:15:29 GMT00000000-0000-0000-000000001462How do I get the tab panel to postback on a client click event? The tab container has the active tab changed event, but that fires after the tab has changed, and the content that was on the previous tab is out of scope. The client clic event actually fires at the correct time.

]]>Comment Posted by LukeNLaurahttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlMon, 31 Mar 2008 13:31:44 GMT00000000-0000-0000-000000001463Hi,

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

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

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 01 Apr 2008 07:09:31 GMT00000000-0000-0000-000000001455Chris - relocating the tabs is not supported in this version of the control, but you could modify the source.

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

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

]]>Comment Posted by NIckKhajahttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 01 Apr 2008 15:43:20 GMT00000000-0000-0000-000000001456Hi Joe,

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

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

Thanks.

]]>Comment Posted by pardohttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlTue, 01 Apr 2008 22:40:44 GMT00000000-0000-0000-000000001457The tabs control works great. However, I'm generating mine at runtime. When I wire up:

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

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

Thanks

pardo

]]>Comment Posted by parth_192http://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlThu, 03 Apr 2008 07:34:35 GMT00000000-0000-0000-000000001464Hi how can i use this tab control for two level tabs..like first level of Parent tab and on clicking on that there is another tab control under that parent tab which are child tab...can u help me out..

Thanks,

Parthiv

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlThu, 03 Apr 2008 18:20:08 GMT00000000-0000-0000-000000001465Guys - great that your pushing the limits. In order to do those kinds of things that the control is not designed to do you will need to customize the code. Luckilly, it's open source !

]]>Comment Posted by Reclaimerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 16 Apr 2008 08:58:06 GMT00000000-0000-0000-000000001466[quote]The bad news is that if your AJAX application si doing page postbacks, your added tabs don't survive a postback so you will have to keep that of what you've added and RE-created the added Tabs in the Page_Init method.[/quote]

any tutorials? thanks.

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 16 Apr 2008 14:22:20 GMT00000000-0000-0000-000000001467Actually - I have did a tutorial that should be live here late tomorrow. :)

]]>Comment Posted by Dollarjunkiehttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 16 Apr 2008 15:29:27 GMT00000000-0000-0000-000000001468I have a question. From the video tutorial I noticed you mentioned over and over that one could place any HTML and dynamic content within the content tags of the TabPanel Control and I wanted to know if the dynamic content could include, say, a repeater control or any other server side controls? I tried those a couple of time and wanted to get info from the expert if it is even possible to do such.

]]>Comment Posted by pandacadhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 16 Apr 2008 18:19:15 GMT00000000-0000-0000-000000001469I try to use the css styles but it not works, is necesary override some procedure?

Tab control steal working with a default webresource.

I'm using these css styles what is wrong?

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

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

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

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

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

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

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

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

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

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

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

And CssClass in tab control is equal to "ajax__tab_xp"

Thanks.

]]>Comment Posted by JoeStagnerhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlWed, 16 Apr 2008 18:43:44 GMT00000000-0000-0000-000000001470Did they work when you tried them ? :)

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

]]>Comment Posted by gnuts4lunchhttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlFri, 09 May 2008 07:24:24 GMT00000000-0000-0000-000000001471how can i create the tabs dynamically from a web.sitemap?

thanks

]]>Comment Posted by dollyphttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlFri, 09 May 2008 09:23:28 GMT00000000-0000-0000-000000001472i have a similar problem to one of the comments above. I'm using the Ajax toolkit with VS 2005 and create a simplae page derived from a master page and dropped a tab container on it and created two tab panels but everytime i run it, the tab conatiner is not displayed at all. here's my code below, any help pls:

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

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

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

       <ContentTemplate>hello</ContentTemplate>

       </cc1:TabPanel>

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

       <ContentTemplate>hi</ContentTemplate>

       </cc1:TabPanel>

   </cc1:TabContainer>

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

   </asp:ScriptManager>

]]>Comment Posted by vraohttp://www.asp.net/web-forms/videos/ajax-control-toolkit/how-do-i-use-the-aspnet-ajax-tabs-controlThu, 15 May 2008 08:59:41 GMT00000000-0000-0000-000000001473The tutorial was help full

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

  Ajax Tab Manager

2. On How to carry Server Variables

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

thank you

]]>