AJAX Toolkit Tabs

Is this the intended effect withthe tab control

I notice that each time i roll over a tab (other than the front active one) it makes a call to the server

TIA

i noticed exactly the same thing...

a tab (other than the front active one) it makes a call to the server...

even with the simple code below...

<ajaxToolkit:TabContainer runat="server" ID="TabContainer2">

<ajaxToolkit:TabPanel runat="server" ID="TabPanel4" HeaderText="TabPanel1">
<ContentTemplate>
TabPanel1
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="server" ID="TabPanel5" HeaderText="TabPanel2" Enabled="true">
<ContentTemplate>
TabPanel2
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="server" ID="TabPanel6" HeaderText="TabPanel3">
<ContentTemplate>
TabPanel3
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

i noticed it makes call to server...

ajax toolkit - tabpanel question

How can I control the height of the tab label? I have too many tabs to fit on my page, so I have put a <br /> tag in the heading. This works, but because the tab label itself is too thin, the rest of the label is not visible.

Hi,

You can use .ajax__tab_xp .ajax__tab_tab{height: 100px} property to set the height of the tab.

AJAX Textbox Extender

I'm using an AJAX textbox extender to present a masked textbox for the entry of Social Security numbers to the user. When the user tabs into it, it displays the mask and formats the data as it's entered, both of which are expected actions; however, when the user tabs away from the control to another control on the form, the formatting disappears and all that's displayed is the string of nine digits for the SSN.

Is there a way to force it to continue displaying the formatted SSN?

Doesn't anyone know the answer to my question?

Have you tried setting the ClearMaskOnLostFocus property to false? I think that should work for you, but if you access the .text property of the textbox, the mask characters will be in the string.

Hope that helps!

AJAX Tabs/TabPanels - Hovering different tab reloads page?

I'm using ASP.NET and i"m new with AJAX. I have some datagrids where I'm editing multiple lines. I thought it would look better to have each Datagrid inside an AJAX tab. I was right. I'd like to update the data in the datagrids all at once. I have a button that does that. Once the button is clicked, the data starts being written into a database, but if i hover a different tab on accident/on purpose the function performed by clicking the button automatically stops. The same thing happens on a hyperlink. If i click a hyperlink and hover a tab before the new page loads, the new page doesn't load. I'm sure this problem is something stupid I'm overlooking, but can somebody help me out? Thanks in advance.

Bump.

Bump, maybe I need to somehow change the AutoPostBack settings within AJAX? Anyone?

Hi,

It's hard to say where the exact cause lying on, Can you show me a simple repro?

Thanks

Well, here is an example where it happens..... http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx

If you click the email tab, then click the cascading drop down link......as soon as you click it, hover the Signature and Bio tab. The clicked link will not load. This has to be done extremely quickly in this example. Everytime you hover a tab, it seems to refresh something on the page. In my code, I used their SampleWebSite to make my tabs. The big difference is that I'm clicking a link/button that performs database operations which take 4-5 seconds to load rather than 1 second like the example from their webpage. So, if someone clicks a link or update button that accesses my database, I don't want the actions in the background to stop when a tab is hovered. This is not good for the average customer/user. For a day or so, I was hovering the tabs on accident because at the time, my hyperlink was immediate above the tabs. Since then, I've moved it to the bottom of the page under the tab panel, but I still don't won't the hovering to stop running what is occuring on the server. Thanks.

Ajax Tabs UI and Data Controls

Hi all

Not too sure if this is covered else where? Does the Ajax Tab control have a display on demand method?

I want to display customer details on an Ajax Tab UI, I could do this with a custom tab but would like to use the MS Ajax framework where possible.

The tabs need to include the following:

tab 1: Customer Summary/Details

tab 2: Customer Contacts

tab 3: Customer Orders/History

and so forth...

My issue is, I don't quite know how to do this as each tab accesses a different DataSource/Stored Procedure to bring back the results. I obviously want to write this in a "best practices" way and therefore avoid long loading times etc... Any help would be greatly be appreciated.

Thanks in advance.

Check this out:http://blogs.msdn.com/sburke/archive/2007/06/13/how-to-make-tab-control-panels-load-on-demand.aspx

-Damien

Thanks Damian, I'll give it a go.

AJAX Tabs stack together when AsyncPostBackTrigger

Hello,

On my WebPage, there is a DropDownList shows a list of categories, when selected, a GridView show records based on that selected category.

for each row of the GridView, it shows AJAX Tabs with 3 TabPanels, user can click on each tab to view information.

the problem:

When I wire up the AsyncPostBackTrigger, between the DropDownList and GridView, and run it, the 3 tabs in each row are all stacked one on top of each other, If I don't wire up the Trigger, it shows OK.

Please refer to attached Code, and screenshots, the left side is before the wireup and hte right is after.

Anybody has encounted the same problem?

Please advise,

Thank you

1<asp:ScriptManager ID="ScriptManager1" runat="server">2</asp:ScriptManager>34<asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true">5<asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem>6<asp:ListItem Text="Category 1" Value="1"></asp:ListItem>7<asp:ListItem Text="Category 2" Value="2"></asp:ListItem>8<asp:ListItem Text="Category 3" Value="3"></asp:ListItem>9</asp:DropDownList>1011<br />1213<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always">14<Triggers>15<asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" />16</Triggers>17<ContentTemplate>18<asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"19DataKeyNames="ResearchID" Width="100%" EnableViewState="False">21<Columns>24<asp:TemplateField>25<ItemTemplate>26<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%">27<cc1:TabPanel ID="TabPanel1" runat="server" Width="100%">28<HeaderTemplate>29<asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label>30</HeaderTemplate>31<ContentTemplate>32<div>33<!-- Information in Tab1... -->34</div>35</ContentTemplate>36</cc1:TabPanel>37<cc1:TabPanel ID="TabPanel2" runat="server">38<HeaderTemplate>39<asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label>40</HeaderTemplate>41<ContentTemplate>42<div>43<!-- Information in Tab2... -->44</div>45</ContentTemplate>46</cc1:TabPanel>47<cc1:TabPanel ID="TabPanel3" runat="server">48<HeaderTemplate>49<asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label>50</HeaderTemplate>51<ContentTemplate>52<div>53<!-- Information in Tab3... -->54</div>55</ContentTemplate>56</cc1:TabPanel>57</cc1:TabContainer>58</ItemTemplate>59</asp:TemplateField>60</Columns>61</asp:GridView>62</ContentTemplate>63</asp:UpdatePanel>

Hi,

Would you mind posting your code again without line number? It's hard to eliminate them.

OK, there you go.

<asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"DataKeyNames="ResearchID" Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><cc1:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="<%$Resources:tab.1%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="<%$Resources:tab.2%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></cc1:TabPanel><cc1:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="<%$Resources:tab.3%>"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></cc1:TabPanel></cc1:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel>

I tried your code on my page, but can't reproduce the issue.

Here is my page, please try it to see if it works on your side.

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { Northwind nt = new Northwind(); // the object used to get data from NorthWind database System.Data.DataTable dt = nt.GetBasicInformationOfAllEmployees(); gdvResearch.DataSource = dt; gdvResearch.DataBind(); }</script><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div> <asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager><asp:DropDownList ID="ddl1" runat="server" AutoPostBack="true"><asp:ListItem Text="--Select a Category--" Value="0"></asp:ListItem><asp:ListItem Text="Category 1" Value="1"></asp:ListItem><asp:ListItem Text="Category 2" Value="2"></asp:ListItem><asp:ListItem Text="Category 3" Value="3"></asp:ListItem></asp:DropDownList><br /><asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="always"><Triggers><asp:AsyncPostBackTrigger ControlID="ddl1" EventName="SelectedIndexChanged" /></Triggers><ContentTemplate><asp:GridView ID="gdvResearch" runat="server" AllowSorting="True" AutoGenerateColumns="False"Width="100%" EnableViewState="False" ><Columns><asp:TemplateField><ItemTemplate><ajaxtoolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="445px" Width="100%"><ajaxtoolkit:TabPanel ID="TabPanel1" runat="server" Width="100%"><HeaderTemplate><asp:Label ID="lblTab1" runat="Server" Text="aa"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab1... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel2" runat="server"><HeaderTemplate><asp:Label ID="lblTab2" runat="Server" Text="bb"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab2... --></div></ContentTemplate></ajaxtoolkit:TabPanel><ajaxtoolkit:TabPanel ID="TabPanel3" runat="server"><HeaderTemplate><asp:Label ID="lblTab3" runat="Server" Text="cc"></asp:Label></HeaderTemplate><ContentTemplate><div><!-- Information in Tab3... --></div></ContentTemplate></ajaxtoolkit:TabPanel></ajaxtoolkit:TabContainer></ItemTemplate></asp:TemplateField></Columns></asp:GridView></ContentTemplate></asp:UpdatePanel> </div> </form></body></html>

Just trying...

What if you wrap your updatepanel inside something with a fixed width, like a table... I think your gridview's width of 100% "isn't sure" where to take the 100%... Also try giving your TabContainer a fixed width (in px)...

Ajax Tabs OnClientActiveTabChanged error

I have 3 tabs .OnClientActiveTabChanged event I am calling a function which is defined in a separate javascript file.My code works when I have the script code in same file as aspx page. But it throws javascript error when i have the code in a seprate javascript file. "Null is null or not an object" var InslastName = $get(''); var InsFirstName = $get('');The InslastName and InsFirstName are always getting as null when using external script file.I tried to use the ids 'txtInslastName' and 'txtInsFirstName' in the function,but getting error.I have many attributes in my aspx page . So i cant pass ClientID as parameter to the function.Is there any way to get resolve this issue?

Hi Sarathmn,

We cannot use Control.ClientID on a separate js file. Your problem is mainly caused by the ClientID issue. When a TextBox inside a TabPanel, its ClientID looks like this TabContainer1_TabPanel2_TextBox1, so you can find out the real ClientID from the generated HTML code and modify your js functions. Here is the another way which I would prefer.

<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="1" OnClientActiveTabChanged="tabChanged">

function tabChanged(sender, args){
tabIndex = sender.get_activeTabIndex();
switch(tabIndex)
{
case 1: myfunction('"<%=TextBox1.ClientID%>"');break;
case 2: myfunction('"<%=TextBox2.ClientID%>"');break;
break;
}
}

myfunction is a function inside the separate js file.

I hope this help.

Best regards,

Jonathan

Thanks Jonathan for your reply.

I have a doubt.

Can I assume that the client side id of the controls inside a TabPanel have "TabContainer1_TabPanel2_" pre-fixed with the actual id?

Hi Sarathmn,

Currently, yes. But if you put the Tab control inside another contol, it is hard to say.

I hope this help.

Best regards,

Jonathan

Ajax Tabs not showing properly

I have tried implementing the tabcontainer using the example, and for some reason I cannot get the tabs to show properly. For some reason there is a grey box in each of the tabs which covers exactly half of every tab. Is there a style I need to add to fix this?

This a link to an image of what I am talking about:

http://shutter7.com/coppermine/displayimage.php?pid=2499&fullsize=1

Hi there,

For some reason, the use of ajax tab, your aspx are require to be xhtml validate.

Put following line in your aspx page. It will fixes the issue. Hope it helps!

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<htmlxmlns="http://www.w3.org/1999/xhtml">

That fixed it, but now all of my pages with css styles are now messed up. For example: the same class for a font is working in one row and not the other.

Hi jwhite128,

I've had this problem too. I was able to solvethis using simple workaround: I just overwrote the CSS class style withmy own implementation which then I included directly in my applicationas CSS resource. I even can reproduce the original "XP" style of theTabContainer by just copying the relevant images in my application'sThemes folder.

So my suggestion: create new Tabs style andimplement whatever visual behavior you need, then just set the CssClassattribute of the TabContainer extender.

Kind regards,

sbogus.

I've tried looking for the class names... where are some docs that contain the class names in question?

Hi jwhite128,

There's no direct documentation about which CSS classes you can override and how to do that. There's rather than information spread over several source files from the AjaxControlToolkit source three. You should look at the Tabs subfolder (not the one from the Examples!)

These are the CSS classes you can override in a CSS file ("new" is the name of the style I choose for this post, you should then specify the TabContainer's attribute CssClass="ajax__tab_new" to override the CSS style):

/* inactive tab */
.ajax__tab_new .ajax__tab_header
.ajax__tab_new .ajax__tab_outer
.ajax__tab_new .ajax__tab_inner
.ajax__tab_new .ajax__tab_tab
/* active tab */
.ajax__tab_new .ajax__tab_active .ajax__tab_outer
.ajax__tab_new .ajax__tab_active .ajax__tab_inner
.ajax__tab_new .ajax__tab_active .ajax__tab_tab
/* tab hover */
.ajax__tab_new .ajax__tab_hover .ajax__tab_outer
.ajax__tab_new .ajax__tab_hover .ajax__tab_inner
.ajax__tab_new .ajax__tab_hover .ajax__tab_tab
/* tab's body */
.ajax__tab_new .ajax__tab_body

Kind regards,

sbogus.

This is for anyone who implements<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> and finds that all of their classes and style sheets get messed up.

The classes in your page become case sensitive. So make sure you check the cases of your classes or else they will appear to be all jacked up.

ajax tabs like yahoo

hi guys..how do i create ajax tabs like which are used in yahoo main page.. please help me as im a begginer still ?

i have installed ajax control tool kit and all:)

there is no built in control for you ready to use..you need to write your own

try look it

http://www.codeproject.com/aspnet/TabControl.asp

if you want to avoid page refresh then you can try use updatepanel

cheers

AJAX Tabs in SharePoint Web Part

Has anyone seen an issue like the one below where the AJAX Tab Control's tabs have a white space when used as part of a web part in SharePoint?

Notice the white space slightly overlapping the text on each tab. Also notice that the white space begins at the tabs left most point, but ends before the right most point. Has anyone else seen this issue and resolved it?

Hello,I have exactly the same problem when I use this AJAX Control in my webpart SharePoint, only with IE (with Firefox the display is good). But when I use this AJAX Control in a page .aspx (not in a webpart) the display is normal with IE and Firefox.Actually I don't success to find a solution If anybody has an advice, I am interested Thank you

The solution we have arrived with is as follows...but you will need to get the Ajax Toolkit with Source Code. (This is not tested in Firefox as we are only supporting IE at the current time!!!!! If you try this with Firefox please post the results back!)

Open the Tabs folder of the Ajax Toolkit and change the tabs.css to be:

/* default layout */
/* .ajax__tab_default .ajax__tab_header {white-space:nowrap;} */ <!-- Remove only if you want to allow the tabs to wrap across multiple lines as well. It actually doesn't look bad. -->
.ajax__tab_default .ajax__tab_outer {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_inner {display:-moz-inline-box;display:inline-block}
.ajax__tab_default .ajax__tab_tab {margin-right:4px;overflow:hidden;text-align:center;cursor:pointer;display:-moz-inline-box;display:inline-block}

/* xp theme */
.ajax__tab_xp .ajax__tab_header {font-family:verdana,tahoma,helvetica;font-size:10px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-line.gif")%>) repeat-x bottom;}
.ajax__tab_xp .ajax__tab_outer {padding-right:4px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_inner {padding-left:3px;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_tab {height:21px;padding:4px;margin:0;background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_hover .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-hover.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_outer {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-right.gif")%>) no-repeat right;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_inner {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active-left.gif")%>) no-repeat;}
.ajax__tab_xp .ajax__tab_active .ajax__tab_tab {background:url(<%=WebResource("AjaxControlToolkit.Tabs.tab-active.gif")%>) repeat-x;}
.ajax__tab_xp .ajax__tab_body {font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;padding:8px;background-color:#ffffff;}

/* scrolling */
.ajax__scroll_horiz {overflow-x:scroll;}
.ajax__scroll_vert {overflow-y:scroll;}
.ajax__scroll_both {overflow:scroll}
.ajax__scroll_auto {overflow:auto}

Once you have done this recompile the DLL, link it in and deploy your solution. Also...you may find that if you deploy the Ajax Toolkit as part of a solution into the standard "BIN" directory you may get a 403 Forbidden error until an Administrator logs into the system. If you experience this then deploy the Ajax Toolkit to the GAC, this will resolve the issue.

Thank you for your answer. I will test this monday morning at work !

I had a similar problem. It's not really an issue. It was caused by your stylesheet referencing:

You probably have this:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">

Do this instead:

<%@. Page Language="VB" AutoEventWireup="true" CodeFile="Default.aspx.vb" Inherits="_Default" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<link href="http://links.10026.com/?link=StyleSheet.css" rel="stylesheet" type="text/css" />

You will be fine.

Notice we are using this as part of a SharePoint (actually MOSS 2007) AJAX enabled Web Part. Since we have no idea where the web part will be deployed (what page) modifying the code on the page is not what we want to do. Instead the modifications within the CSS have allowed us to deploy our web part with the tab control within it and not have to worry about where the CSS refernece appears on the page.

Make sure the doctype is XHTML. That used to occur before I upgraded our app from HTML 4. The toolkit is not 100% compatible with HTML 4. I'm not using SharePoint, but it shouldn't make a difference.

I am having the same problem, and i have compiled your suggestion. It now works in IE, but now the right side of each tab is jacked up in Firefox.

It seems to look just fine on our site.

Our site is a MOSS 2007 site, we have not used this on any other older technologies.

I have not tried any other methods 1) because we needed the issue solved quickly and 2) because we wanted to modify some of the other behaviors like allowing the tabs to wrap. I don't think you will be able to because you cannot get access to the Tab objects to modify their CSS class setting.

On the other hand we believe that we have found the culpret to this issue. Its appears if you ever to a response.write during a page load and have malformed HTML then the issue of the white space occurs, even on ASP.NET sites. We have not dug into the MOSS 2007 page to see where this could be occuring or how to fix it, but it is the most likely source of the issue.

ajax tabs display in firefox

hi there; using asp.net 2.0 (vb), can someone please copy and paste this basic ajax tab page into their site and explain why, in firefox, the content is not being contained within the tab content container. look at the same page in internet explorer and it works fine.

is it a css issue? i can't image why it would be. just a simple 2 column div.

thanks all.

<%@dotnet.itags.org. Page Language="VB" %
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"
<script runat="server"
</script
<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
<title>Tabs</title>


</head>
<body>
<form id="form1" runat="server">
<asp:ScriptManager id="ScriptManager1" EnablePartialRendering=true runat="server"/>

<div>
<div id="Tabs" style="width:100%; clear:both;">
<ajaxToolkit:TabContainer ID="TabContainer3" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel3" runat="server">
<HeaderTemplate>
Tab 1
</HeaderTemplate>
<ContentTemplate>
<div style="text-align:left; clear:both; width:100%;">
<div style="width:545px; float:left; margin:0px; padding:0px;">
Left Side 1<br />
Left Side 1<br />
Left Side 1<br />
</div>

<div style="width:375px; float:left; margin:0px; padding:0px;">
Right Side 1<br />
Right Side 1<br />
Right Side 1<br />
</div>

</div>
</ContentTemplate>
</ajaxToolkit:TabPanel>


</ajaxToolkit:TabContainer>



</div>
</div>
</form>
</body>
</html>

found the issue ... needed a third div ... clear

<%@.PageLanguage="VB" %>

<!DOCTYPEhtmlPUBLIC"-//W3C//DTD XHTML 1.0 Transitional//EN""http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<scriptrunat="server">

</script>

<htmlxmlns="http://www.w3.org/1999/xhtml">

<headid="Head1"runat="server">

<title>Tabs</title>

</head>

<body>

<formid="form1"runat="server">

<asp:ScriptManagerid="ScriptManager1"EnablePartialRendering=truerunat="server"/>

<div>

<divid="Tabs"style="width:100%; clear:both;">

<ajaxToolkit:TabContainerID="TabContainer3"runat="server">

<ajaxToolkit:TabPanelID="TabPanel3"runat="server">

<HeaderTemplate>

Tab 1

</HeaderTemplate>

<ContentTemplate>

<divstyle="text-align:left; clear:both; width:100%;">

<divstyle="width:545px; float:left; margin:0px; padding:0px;">

Left Side 1<br/>

Left Side 1<br/>

Left Side 1<br/>

</div>

<divstyle="width:375px; float:left; margin:0px; padding:0px;">

Right Side 1<br/>

Right Side 1<br/>

Right Side 1<br/>

</div>

<divstyle="clear:both;"></div>

</div>

</ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

</div>

</div>

</form>

</body>

</html>

AJAX Tabs button click event is not working

Hi there,

I am use AJAX Tabs control and placed a quite few buttons in each tab panel.

But when I run the from its change the tabs but when I am trying click the buttons inside the tab panels it is not woring. just stand still. no event being save,reset, redirecting.

I have even tried to put whole tab container into updatepanel and write is postback triger to that buttons but that also it not worked.

Is any one have some suggestion post it...

can u post your code..

Hi Geek,

Kindly find the code below in which when I am try to click the button which is placed inside the tab panel it is not working.

<cc1:TabContainerID="TabContainer2"runat="server">

<cc1:TabPanelID="TabPanel4"runat="server">

<HeaderTemplate>Home

</HeaderTemplate>

<ContentTemplate>

<asp:TextBoxID="date1"runat="server"></asp:TextBox><cc1:CalendarExtenderID="CalendarExtender5"

runat="server"TargetControlID="date1">

</cc1:CalendarExtender>

<asp:ButtonID="Button1"runat="server"Text="Button"/>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

what I was trying is when he select that date & click on the date selected I have the data in database which I have to show in grid...

Just have a hands on it if you find any thing.

just post it...

You are not written the Click event of button, so it was not working..

if i select the date and press on the button , it will give me the selected date, now then you can do any operations that you want..

Ajax Tabs and SEO

Hello,

I am going to publish a site which has lot's of content into some Ajax Toolkit TABS.

For each product in the site, there's a "General", "Article" or "Details" tabs, the content of each tab is static, so is all generated and sent to the browser when the page is requested. There is almost no information regarding the product outside of the tab control.

The question is: Since all the tabcontrol when rendered is a DIV with "visibility:hidden;" style attribute, and each tab (but the first) has a "display:none;visibility:hidden;", do this causes the site and the content to be penalized by Google?

If yes, is there any alternative way to do that?

Thanks,

Michele

Google doesn't actually read the visibility of the controls, as long as they are on the source of the page, it will crawl it.

Hi,

are you sure about it? Beacause all what I've read tells the opposite... For examplehere and also in thegoogle webmaster guidelines.

The metter is not about if google detects hidden text (it also downloads external css, even if in this case is not necessary since the visibility attributes are directly in the rendered page), but if the hidden text is consider as spam, and if will penalize the content which is hidden.

The website I am going to publish contains a "full page" tab with all the page content, divided into "sections" by different tabs, this is why I am a bit worried about it, the tab do not contains only a "news section" or something small which I don't care if its content will be penalized or ignored by the crawler, but all the content of the page.

I had this doubt is beacause when I've seen a tab rendered, it is ALL contanied into a "visibility:hidden;" div, and each tab is contained into a "display:none;visibility:hidden;" div. Of course the content is visible (thanks to javascript the activetab is visible when the page is rendered and all the other content is visible when the user selects the tab), the fear is that all this could be interpreted as spam, even if it's not.

Thanks,

Michele

Ajax tabs aligned right

Hi all,

is there a way to use AJAX.NET Tab Control and have the tabs aligned right? I tried already to customize my css styles of tabs, but result is that border of tabs body is not drawen correctly.

Thanks for posts in advace.

Michal

For now I have workaround, because it looks like it is not possible with Tabs control in ajax.net.

Workaround is to count needed left padding and add this padding-left to header css style. After it looks like it is aligned to the right. But with this "solution" you need to have special css tab style for each language.

Michal

AJAX Tabs

How would I access the ajax tab index in javascript?

How would I add an auto scroll on the tab menus, so that when the page loads it loops through each tab in a loop?

Hi,

You can manipulate the tabContainer object on client side by finding a reference to it.

For instance:

var tc = $find("ClientIDOfTheTabContainer");

tc.get_tabIndex();

For more information about the functions and properties that tabContainer exposes, please refer to Tabs.js in the source code of AjaxControlToolkit.

I tried to accessing the tabcontainer using your example and it didn't work. I tried to access it adding the script block inside the body and in the head tag and neither worked. Do I have to register the script block with the page?

var tc = $find("TabContainer1_cllTabControl_7Tab_0");
alert(tc);

var tc = $find("TabContainer1");
alert(tc);

try this;

var tabContainer = $get('<%=TabContainer1.ClientID%>')

AJAX Tabs

I am using a tab container with four tab panels. On the first panel is my user information 10 fields 8 are required and have required field validators attached to them. On the second tab is a button that when clicked checks the 8 required fields for validity. If they are not all filled in I would like to have the first tab become the selected tab. Is there anyway to do this? Just starting to work with ajax so any hints would be greatly appreciated.

I'll give it a look tomorrow at work!

Just replying so it gets in my posts and I will remember ;)

I'll get back to you,
Wim.

Ok smitty,

I made a small working example.

(It could be that you have to change the tagprefixes of the controlToolkit extenders)

I got my inspiration here:

You could read them to get full understanding of what I'm doing in the code:

Calling ASP.net validators with javascript (http://www.codeproject.com/useritems/JavascriptValidation.asp)

Thank you so much. This has solved my problem.

Thanks

AJAX tabs

Hello,

I was checking the new AJAX tabs:

http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx

Is it possible to use images for the tabs or only text?

Could someone tell me where can I find some info on it?

Thanks,

Miguel

The HeaderTemplate maybe helpful for building custom tabs' head

ajax tabs

I am looking for an example that populates the tabs with data from a database?

Dave

If you're doing it server-side, you can just put any server control there and then bind it in the codefile like any other database binding.

If you're doing it clientside, you can call a webmethod (web service or pagemethod) and have your 'OnSuccess' function fill it using the html element's innerHTML property.

Both techniques are well documented.

AJAX TabPanel ScrollBars

Hello,

I use AJAX Tabs to display text and image content in 4 tabs (fixed height, no scrolling). I'd like to add 5th tab to display a text which is pretty long so it's supposed to be scrollable. Whatever I do, I'm not able to make scrollbars apper in the tab. The text just flows down the page with no limits. I've tried to set fixed height for both TabContainer and TabPanel together with ScrollBars attribute set to all possible values. It simply doesn't work for me. Where is the catch?

 <atk:TabPanel ID="tabComments" runat="server" HeaderText="Nové komentá?e" ScrollBars="Both" Height="100px">
 <ContentTemplate>
 <table>
 <asp:Repeater ID="rptComments" runat="server" DataSourceID="sqlDS_DefaultComments">
 <ItemTemplate>
 <tr>
 <td><%#Eval("ItemName")%></td>
 <td><%#Eval("ItemOriginalName")%></td>
 <td><%#Eval("RatingInserted")%></td>
 </tr>
 <tr>
 <td colspan="3"><%#Eval("RatingText")%></td>
 </tr>
 </ItemTemplate>
 </asp:Repeater>
 </table>
 </ContentTemplate>
 </atk:TabPanel>

Thanks for any help,
Radoslav

Add a DIV to your TabPanel and set the CSS overflow (or overflow-x and/or overflow-y) to be auto along with a fixed height.

-Damien

It works! Thanks a lot.
Radoslav

Ajax TabContainer event.

Hi,
I have a Ajax tabcontainer on my webpage. How can I handle the events when I changed the tabs. I have usedOnActiveTabChanged event in the tabcontainer but it is not working. Please can any one help me? I am providing my code here. Your response is highly appreciated.

<ajaxToolkit:TabContainerID="TabContainer1"runat="server"Width="100%"ActiveTabIndex="0"
ForeColor="green"OnActiveTabChanged="TabContainer1_ActiveTabChanged" >
<ajaxToolkit:TabPanelID="tabPanelSiteDetails"runat="server"HeaderText="Site Details"BorderStyle="Dotted">
<ContentTemplate>
<uc8:HeadingMessageID="HeadingMessage1"runat="server"/>
<uc1:Sites_SiteDetailsID="Sites_SiteDetails2"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="tabPanelCOntacts"runat="server"HeaderText="Contacts"CssClass="AjaxTabItem_Site">
<ContentTemplate>
<ucall:Sites_ContactDetailsID="ContactsAll"runat="server"/>
<br/>
<uc2:ContactsID="Contacts"runat="server"/>
<br/>
<uc7:EditDelteCancelID="EditDelteCancel3"runat="server"/>
</ContentTemplate>
</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

***********CODE BEHIND CODE**************

protectedvoid TabContainer1_ActiveTabChanged(object sender,EventArgs e)
{
FillData();
}

Thanks & Regards

Not sure it will help , but could you try to set AutoPostback = true for tab container?

I have the same problem.

Autopostback=> "is not a valid attribute" !

The callback arrives only after a request to the server.

A solution is perhaps to use theOnClientActiveTabChanged and then starting a request from Javascript.

Is there a better way?

Sincerely

Stephan Schipal

I used the same thing (OnClientActiveTabChanged event). It is working for me.

Is there any way to control the background color of the TabContainer???

Hi,

The name of this attribute is AutoPostBack. Please note the three capital letters in the word.

And as far as I know from my own eperience and from the experience of many other users, server-side eventing functions properly.

Kind regards,

sbogus.

Yes,

You can control the whole outlook of a tab panel (the tab container's entity). You can override the CssClass attribute of the TabContainer control. In your own CSS you can then define own style and themes for the container.

For example to control the body's outlook of a tab panel you should override the class

/* tab's body */
.ajax__tab_new .ajax__tab_body

If you need further assistance, just ask here again.

Kind regards,

sbogus.