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 Tab Panel

Hi there.

I have downloaded and installed the Ajax toolkit on my machine. The Tab Container is there but the tab panel that should be also utilized to create tabs in web pages is not there.

Kindly advice. Thanks.

Am using VS2005 and framework 2.0

I had seen this in a few other posts. Two builds currently do not have it there, you have to add it. Refer to this other post:

http://forums.asp.net/p/1184875/2018704.aspx#2018704

Have already figured out the tabpanel.

When I inserted a Tab Container control from the ajax extensions toolkit, the add tab panel is visible on the properties pane of VS2005.

Thanks for the reply.

Ajax Toolkit Controls disabled

I downloaded ajasx control toolkit for .net 3.5 and added into separate tab in visual studio 2008 tolbox.

Problem is they are invisible (disabled when pres Show All in toolbox).

Anybody familiar with this issue?

Hi Ekaan,

Someone has met this kind of issue before. Please have a test by followingthis article.

This response contains a reference to a third party World Wide Web site. Microsoft is providing this information as a convenience to you. Microsoft does not control these sites and has not tested any software or information found on these sites; therefore, Microsoft cannot make any representations regarding the quality, safety, or suitability of any software or information found there. There are inherent dangers in the use of any software found on the Internet, and Microsoft cautions you to make sure that you completely understand the risk before retrieving any software from the Internet.

If it doesn't work, please feel free to let me know.

Best regards,

Jonathan

Thanks but that didn't help.
I can use them trough source (markup or C#) but it slows down my development :-(

I have same issue with Telerik prometheus controls.

Hi Ekaan,

ekaan:

Problem is they are invisible (disabled when pres Show All in toolbox).

Would you please describe your issue more clearly for us?

Best regards,

Jonathan

AJAX toolkit "access denied" problem

I am redesigning a site to include AJAX. On a new page that I created that contains a Tab Control, when I copy the page to the site's server, why would I be getting an "access denied" problem for a page that allows anonymous users? When I remove all references and controls for AJAX, it works fine.

Thanks for the information

Some more information on this problem...it seems as if it may be an IIS permission problem. All the AJAX controls run fine on the development machine, but in examining the website even further, any page with interaction, like a textbox with a watermark, I am getting Access Denied errors. Any help on this problem would be appreciated.

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 TOOLKIT - TAB CONTROL- scripts

I was watching the video about this control, its great, but i have got a lot of questions. First: Why is the script language javascript?. I have tried using vbscript but it showed me some errors, so its a must javascript for AJAX controls?.

Whats the diference btween type=text/javascript, and language=javascript.

Hi,

Basically, you can use vbscript to call functions defined in javascript library via call statement. But, in my opinion, it's rather annoying to try to achieve this, and strongly recommend you using javascript directly.

Imnoob007:

Whats the diference btween type=text/javascript, and language=javascript.

They are tags used be browser to detect what's the type of the script, and there is no significant difference between them.

The J in ajax stands for javascript... If you're not used to javascript, don't worry about it, it's easy to learn and there are millions of tutorials and always an answer when you google "javascript [key words]"

(http://www.w3schools.com/ is my favorite)

Thnx guys. thnx for ur time. Now im best informed :)

Ajax Tookit Tab Control

I am all excited to get going with AJAX,

I drag the Tab Container onto the page, the I try to drag the Tab Panel on to the page into the Container and can't do it. OK. change to code view Drag the Panel into the container; that works; add header text; render the page and I see a tab. Still pretty happy.

Now I try to drag a Gridview control into the Panel in code view, run the page get an error

Parser Error Message:Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'GridView'.

Not happy!!

Move on, there was a Button in the demo, so lets try and drag that into the control. No! Error again

Parser Error Message:Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'Button'.

O.K. how about a text box

Parser Error Message:Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'TextBox'.

The Demos make this look very simple, So can anyone comment on why this is happening?

this is how a tabcontainer looks like

<ajaxToolkit:TabContainer ID="tabs" runat="server">
<ajaxToolkit:TabPanel ID="Panel1" runat="server">
<ContentTemplate>
<asp:Button ID="Button1" Text="Hit & Run" OnClick="DoSomething" runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>

if this doesn't make sense, let see your code ...

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 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 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 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 TabControl and validation are incompatible - any way to resolve

Hi -

I've found out that the buttons in my tab panels no longer post back when I add validation on the input form. Is there a way around this? Has anyone solved this?

Thanks for ANY help or idea how to tackle ...

Oliver

Each tab have their own buttons? if this is a case use ValidationGroup. e.g: in tab1 assign to ValidationGroup property in your validation controls and button controls to say tab1, in tab2 assign a validationgroup property of say tab2 and so on.

the content of each tab are in a user control ... I thought that would take care of it, ... thanks for the pointer

Ajax TabControl

Hi there.

I am using a tabcontrol from the ajax control toolkit.

I have three tab panels inside a tab container.

My tab container is TabCon and the tab panels inside are tab1, tab2 and tab3.

How can I do that when for example I click (or selected) on Tab1, a code-behind, let us say Tab1_Clicked event would be triggered. For tab2, when I click on it, a code-behind named tab2_clicked would be triggered.

How would I be able to map the code behind events to the ajax tab control's tab clicked event?

Advice would be highly appreciated. Thanks.

I am kind of stuck with this problem. Any advice coming from those who have implemented something similar to this one?

I was able to create some javasript function but I cannot seem to map directly a function I have in my code behind so that when that java script invokes a postback, only that said code behind is triggered.

Your advice would be highly appreciated as usual.

Thanks.

If you just want to run some client-side (javascript) code, just add an OnClientClick attribute to each TabPanel.

If you want to execute some server-side (VB or C#) code, you need to implement a small hack:

Add a button control or button controls (depending on what you need to do) to the page. Set their style="display:none;".

Hi Plz check this thread

http://forums.asp.net/t/1196925.aspx

Thank u

Baba

Please remember to click "Mark as Answer" on this post if it helped you.

Hi BatutaBunsing,

As far as I know , neither TabContainer nor TabPanel has OnClick event(Server side event). In your situation, you should use ActiveTabChanged event.For example,

protected void TabContainer1_ActiveTabChanged(object sender, EventArgs e)
{
switch (TabContainer1.ActiveTabIndex) {
case 0: //do someting here;
break;
case 1: //do something else;
break;
default: break;
}
}

Best regards,

Jonathan

Hi Jonatahn,

Could you provide more insight on what you have stated here?

I am a bit stuck on this tab index changed for the past few days.. search came out empty or as i must say, inadequate for my need.

thanks.

Hi BatuaBunsing,

Here is a working example that you shall modify on it.

<%@. 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) { // We also can add below to TabContainer1_ActiveTabChanged(object sender, EventArgs e)

switch (TabContainer1.ActiveTabIndex) { case 0: OnTab0Selected(); break; case 1: OnTab1Selected(); break; default: break; } } private void OnTab0Selected() { } .......</script><html xmlns="http://www.w3.org/1999/xhtml"><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server" AutoPostBack="true" ActiveTabIndex="1"> <ajaxToolkit:TabPanel runat="server" ID="TabPanel1"> <HeaderTemplate> TabPanel1</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" /> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> TabPanel2</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button2" runat="server" Text="Button" /></ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </form></body></html>

I hope this help.

Best regards,

Jonathan

AJAX TabContiner control

I am using the tabcontiner control, upon which I have placed 4 tabpanels. Based on the user clicking a button on one tab, I need to be able to disable all other tabs to prevent the user moving away unless they complete the operation, or cancel. I have tried to use the following

TabPanel1.Enabled =True

and

Me.TabContainer1.Tabs(0).Enabled =False

Unfortunately I have had no luck, any suggestions?

Michael.

When you set the TabPanel.Enabled = false it will disappear as I have just tested. I don't know if this is the desired effect that you are looking for or not.

You may want to set the AutoPostBack to true and then hook up an event to OnClientActiveTabChanged so that you can disable the other tabs. Of course you will want to wrap an update panel around the tabcontainer for a better client experience.

I hope this helps.

Hi Jim

Making the tabs disappear would be an acceptable solution, however, the above command will not even do this for me. I will give a look at your solution.

Michael.

ajax tab panel/tab container buggy

Im having a few problems with using tabpanel/tabcontainer from the toolkit...

i tried to style the tabs. i editted the tab images that are given by default with the ajax toolkit, (only the color of the tabs, not the image sizes).

there appears to be a 1 pixel gap between the tab-right-image and the tab-image. i really am having trouble getting rid of it.

also, i placed a google map (using google maps api) in one of the tabs. i had it centered at some fixed coordinates. when outside the tab the map looks fine, but inside the tab the centre of the map goes to the top lefr corner of the <div> that the map is in.

I have the same problem with the coordinates in tab panel. Did you figure it out?

Thanks

You need to fix the "padding" value in your custom tabs css.

I did the exact same thing in an old project (changed the tabs from yellow to gray...),

can't remember exactly which padding I had to change, but here is the css:

/* xp theme */
.MyTabs .ajax__tab_header
{
font-family:verdana,tahoma,helvetica;
font-size:11px; color:White; font-weight:bold;
background:url(images/MyTabs2/tab-line.gif) repeat-x bottom;
}
.MyTabs .ajax__tab_outer
{
padding-right:0px;
background:url(images/MyTabs2/tab-right.gif) no-repeat right;
height:21px;
}
.MyTabs .ajax__tab_inner
{
padding-left:3px;
background:url(images/MyTabs2/tab-left.gif) no-repeat;
}
.MyTabs .ajax__tab_tab
{
height:13px;
padding:4px;
margin:0;
background:url(images/MyTabs2/tab.gif) repeat-x;
}
.MyTabs .ajax__tab_hover .ajax__tab_outer
{
background:url(images/MyTabs2/tab-hover-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_hover .ajax__tab_inner
{
background:url(images/MyTabs2/tab-hover-left.gif) no-repeat;
}
.MyTabs .ajax__tab_hover .ajax__tab_tab
{
background:url(images/MyTabs2/tab-hover.gif) repeat-x;
}
.MyTabs .ajax__tab_active .ajax__tab_outer
{
background:url(images/MyTabs2/tab-active-right.gif) no-repeat right;
}
.MyTabs .ajax__tab_active .ajax__tab_inner
{
background:url(images/MyTabs2/tab-active-left.gif) no-repeat;
}
.MyTabs .ajax__tab_active .ajax__tab_tab
{
background:url(images/MyTabs2/tab-active.gif) repeat-x;
}
.MyTabs .ajax__tab_body
{
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #000000;
border-top:0;
padding:8px;
background-color:#cccccc;
}

It's one or two of the padding values that changed from the default css.

I've tried all the padding settings that you mentioned in your message, however it hasn't fixed the problem.

It's odd because, in Firefox the google maps works fine, however in IE 7 it's truncating the side of the google map. I'll keep trying to see if I can get it working.

I was talking about the pixel gap for image right thing in the tabs in the other post...

To center the map, can you put a table with width="100%" and horizontalAlign="Center" in the tabpanel?

Hi NNM, it doesn't seem to be as simple as that. I tried centering it like this but it doesn't work. Have a look at this page to have an example of what is the problemhttp://www.twilightblue.eu/en/hotel/121975-campanile-hotel-runcorn.aspx then click on the map section and scroll down. It due to the center point not being in the middle of the div. This works fine outside of the tabpanel and in firefox. Also appartently it works if the map is in the first tab panel.

I found a few other postings on this topic, but no real solution. Seehttp://www.reimers.dk/forums/thread/1212.aspx. Any additional help would be appreciated.

I see...

Never used google maps in an app before...

But in this situation, I would "work around" the issue by placing an iframe inside your last tabpanel, where you want the map to be.

In the iframe, put nothing but the google map. That way, you can "trick" the google map into thinking it's outside of the tabpanel..! And that should avoid any conflicts..

Just an idea..

(PS: off topic, but I noticed some warnings in ie7: 4 cookies blocked: 2 from images.activehotels.com ... and 2 from google maps. Just so u know)

Hi Christopher

I found a little clumsy workaround, but it works!

When I was dealing with it, I found out that when you click on a pushpin, the map get centered properly. So I called a click event programtically after the map loading and immediately closed the InfoWindow. So the map gets centered and user can not notice of it.

I called the event like that:

GEvent.trigger(gmarkers[0],"click");

gmarkers[0].closeInfoWindow()

This worked for me.

Hi Guys, for future reference I got this working I added the following line of code at the end of the script. Please note that just the cmap.checkResize() didn't work by itself.

window.onload=function(){window.onload;map.checkResize()}

Thanks for your help on this

Did you solve the problem with the gap in the tab header? I noticed the same thing when I copied the GIFs from the toolkit sample. I think I found a solution but I don't understand why the gap happens when I am using the same CSS as the sample.

I changed the following line:

.ajax__tab_tectrack.ajax__tab_outer {padding-right:4px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

to

.ajax__tab_tectrack.ajax__tab_outer {padding-right:0px;background:url('/Graphics/Tabs/tab-right.gif')no-repeatright;height:21px;}

and the gap is gone...