Showing posts with label tabcontainer. Show all posts
Showing posts with label tabcontainer. Show all posts

Wednesday, March 28, 2012

tab container

hai

i had a tabcontainer.i want to do some server side events when tab index changed.but when i change the tabindex the tab container disappears.how to solve this.i am using ie 6 and asp.net 2.0.i had set the autopost back property of tabcontainer to true.

please sort this issue out.

thanks in advance.

regards

mugil

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

-Damien


Hi Mugil,

Has your problem been resolved yet? If yes, would you please mark it as "answered". Otherwise, please provide your simple sample which contains your issue. Generally, your problem is not occurred in your scene so we really need your code.

Best regards,

Jonathan


Hi Mugil,

Here is an sample. Please compare it with yours.

<%@. 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 TabContainer1_ActiveTabChanged(object sender, EventArgs e)
{

}
</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" OnActiveTabChanged="TabContainer1_ActiveTabChanged">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server">
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server" >
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel2" runat="server" Height="200" Width="100%" style="overflow:auto">
<br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br><br>
<asp:TextBox ID="TextBox2" runat="server"></asp:TextBox>
</asp:Panel>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>
</body>
</html>
If it doesn't work, please check your system environments. We suggest that you should upgrade your Ajax Control Toolkit to the latest version. (10618 or 10920).

Hope this helps.

Best regards,

Jonathan.

Tab Container Custom Style in Firefox...

Hi,

I am using a TabContainer with a custom CSS file. I have copied the original CSS file and have modified it a little. Here is the CSS I am using:

/* xp theme */

/* Our Additions */

.StpAjaxTab

{

margin-left:auto;margin-right:auto;

}

.StpAjaxTab.ajax__tab_header

{

font-family:verdana,tahoma,helvetica;font-size:11px;

/* Our Additions */

border-bottom:solid1px#000000;text-align:left;

}

.StpAjaxTab.ajax__tab_outer

{

padding-right:4px;height:21px;

}

.StpAjaxTab.ajax__tab_inner

{

padding-left:3px;

/* Our Additions */

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_tab

{

height:13px;

padding:4px;

margin:0;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_inner

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_hover.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_outer

{

}

.StpAjaxTab.ajax__tab_active.ajax__tab_inner

{

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;

}

.StpAjaxTab.ajax__tab_active.ajax__tab_tab

{

/* Our Additions */background-color:#DDDDDD;

}

.StpAjaxTab.ajax__tab_body

{

font-family:verdana,tahoma,helvetica;

font-size:10pt;

border:1pxsolid#999999;

border-top:0;

padding:8px;

background-color:#ffffff;

/* Our Additions */

background-color:#DDDDDD;

border:solid1px#000000;border-top:none0px;

}

I am using the TabContainer with the CssClass like this

<asp:UpdatePanelID="UpdatePanel1"runat="server">

<ContentTemplate>

<ajax:TabContainerID="TabContainer"runat="server"Width="750px"Height="200px"meta:resourcekey="TabContainer"CssClass="StpAjaxTab">

<ajax:TabPanelID="AlleTrefferTabPanel"runat="server">

<HeaderTemplate>

<asp:UpdateProgressID="UpdateProgress"runat="server">

<ProgressTemplate>

<asp:ImageID="ProgressImage"runat="server"ImageUrl="~/Images/progressIcon.gif"Width="16"Height="16"/>

</ProgressTemplate>

</asp:UpdateProgress>

<asp:LabelID="AlleTrefferLabel"runat="server"Visible="false"Text="Alle Treffer"meta:resourcekey="AlleTrefferLabel"></asp:Label>

</HeaderTemplate>

<ContentTemplate>

Content, you may place a button to generate a partial postback...

</ContentTemplate>

</ajax:TabPanel>

</ajax:TabContainer>

 

</ContentTemplate>

</asp:UpdatePanel>
If you try this out, you will see, that it will see that it works perfectly on IE. But on firefox, when a partial postback is generated, the tab headers' positions are not as they have to be.
After a partial postback has been generated, the tabs are not moving back to their original position. So the question is simple. How can I get the TabContainer in firefox behave exact like in IE?
I tried to change the css styles, but it doesn't worked.
Thanks for help,
bye...

Seehttp://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx for a tab theming example.

-Damien

Tab container bug

Hi,

while changing the backcolor of tabcontainer, this one (the tabcontainer) has blast all the page code away:

Line 16: "TabPanel1" runat="server">Line 17: "server">Companii"281479271677955" href="" onclick="return;">Line 18: "server">Line 19: "server" ID="UpdatePanel1" __designer:dtid="281479271677957">"281479271677958">

I checked twice this error and happens only after adding tab panels.

Is a tab container or is something wrong with my application? Or is because of the update panel situated inside of a tab panel ?

Getting the same issue when changing the properties of the tabcontainer in a design mode...


Same problem here!!!!

Everytime I set the width of the TabContainer in design view, every<ContentTemplate>gets replaced with <system.web.ui.control>IndifferentIndifferentIndifferentIndifferentIndifferent

Tab Container Header tabs NOT on multiple rows

This is driving me crazy. I have a webpage that has a table on it. Inside the table I have a TabContainer. I have 13 tab headers I need for the one TabContainer. I populate the tab headers by a call to the database then doing a For Loop to enter all the headers. The problem is that when I run the app the tab headers are all on one row. How do I get the Tab Headers to split up into two rows?

Thanks in advanced.

mutlyp

Hi mutlyp,

As far as I know, there is no build-in support for this feature currently. You can votehere.


Hi Raymond

I actually found the answer but it took a lot of digging on the net. It's from Nazar Rizvi's blog

http://www.narizvi.com/blog/post/Two-rows-of-tab-headers-in-TabContainer-in-Ajax-Control-Toolkit.aspx

You have to go into the Tab.css and change the ".ajax__tab_default.ajax__tab_header {}" line. Then the Tab headers will wrap.

Funny how Nazar knew this and you a Microsoft rep didn't. Maybe you guys should hire Nazar.


Mutlyp,

Thanks for that link...

Regards

Karen


Thanks for sharing, it's so helpful.

Tab Control - Enable/Disable Tab on Client

I'm using the AJAX Toolkit TabContainer control and would like to enable/disable tabs on the clientside. I have tried document.getElementById('MyTabContainer').get_tabs()[1].set_enabled(true), but I get the error "Object does not support this property or method." Just to try to capture the appropriate object, I added the OnClientActiveTabChanged="switchTab" attribute to my TabContainer. Then, in JavaScript I wrote a switchTab function: function switchTab(sender, e){ ... } Thesender passed into the switchTab function is the actual TabContainer object I need, and from that I can enable/disable tabs. My problem is I can't figure out how to retrieve the TabContainer object other than capturing the object when sent into the switchTab routine. Any ideas?

Finally solved my own problem, and it was right there in the sample Tab application in the Control Toolkit: http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx. I was able to find the object I needed in JavaScript using the $find method, as similarly done in the demo with the following snippet:

function ToggleHidden(value) {
$find('ctl00_SampleContent_Tabs').get_tabs()[2].set_enabled(value);
}

Monday, March 26, 2012

Tab Control and URL Frame with IE

I have a custom who is using a URL frame to display a page I created with the Ajax Tabcontainer. The page works fine when accessed directly and works fine in Firefox, however in IE 7 when accessed thru the url frame you can't click on any tab to activate and when you rollover the tab it throughs an exception saying access is denied.

Anyone have any ideas how to work around this, or any fixes?

After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.


After many searches I found this: http://weblogs.asp.net/bleroy/archive/2007/01/31/how-to-work-around-the-quot-access-denied-quot-cross-domain-frame-issue-in-asp-net-ajax-1-0.aspx

Which fixes the issue.

Tab headers of Tab Container within the Update Panel

I have a TabContainer inside of Update Panel. It seems that the background style of the tab header don't shows.

<asp:Button ID="Button1" runat="server" Text="View Tab" />
<asp:UpdatePanel ID="UpdatePanel4" runat="server">
<ContentTemplate>
<table id="Table1" runat="server">
<tr>
<td>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server">
<ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 1" runat="server">
<ContentTemplate>
Text 1
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel1" HeaderText="Tab 2" runat="server">
<ContentTemplate>
Text 2
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</td>
</tr>
</table>
</ContentTemplate>
</asp:UpdatePanel>

Is there any other ways to bring back the background style of the tab header.

Thanks in advance

Please help me on this...

You can add a CSS class to your TabContainer. The toolkit ships with the style ajax__tab_xp to ensure its loaded see below.

<Ajax:TabContainerID="TabContainer1"runat="server"CssClass="ajax__tab_xp">

If you still experince issues use fiddler www.fiddlertool.com to check that the XP style sheet is sent as a web resource.

Saturday, March 24, 2012

Tab Panel Problem.

Hi all,

I have a problem ... :) . I have a TabContainer palced on a page. This TabContainer is present inside a UpdatePanel. I have another updatePanel That contains LinkButtons. One of these when clicked causes the TabPanel to be added to the TabContainer with the help of the following code.

TabPanel tp =new TabPanel();tp.HeaderText ="Some Text";TabContainer1.Tabs.Add(tp);


The other links cause certain other Controls to be placed on the then active TabPanel of the TabContainer.

Button b =new Button();b.ID ="someid";b.Text ="SomeText";TabContainer1.ActiveTab.Controls.Add(b);


But When the number of these dynamically added TabPanels becomes more than two, the Contents of the TabPanels are not shown properly. For Example, If I have 3 TabPanels and on each panel I have a Button have text as button1, button 2 abd button3. Now when activetab is TabPanel1 I should see the button text as Button1, similarly for TabPanel2 and tabPanel3. But in my case the TabPanel contents are not shown properly.

Please Help me. What should I do??

Many Thanks.

sasmit

I think the issue is with the positioning of the tab controls and nothing wrong with the code.

Please see if you have hard coded any widths for the control in the source section on your .aspx file

Regards

Arfeen

qaziarfeen.blogspot.com

Please mark as answered if you think its the right solution


i Don't know how it worked but it did... :)

The only change I did was to remove the Hard coded TabPanel inside the TabContainer and if magic it started working correctly. I'll Explain... I had a TabContainer placed inside a UpdatePanel. In this TabContainer I had placed a TabPanel [this was the hard coded panel the I removed]. I Kept adding the TabPanels dynamically as and when needed.

The problem was that the Content was not updated even if the active tab changed.

I removed the harded coded control and It is working fine now.

Cheers :)

tab panel header text not changing programaticlly??

Hi All, I am using AJAX tabcontainer in my one of the web application. This application needs to be support english as well as japanese language. I had tried to change tabpanel1 text at run time by resource file(.resx file) and using Tabcontainer.Tabs[0].HeaderText property. But still tabpanel1 is coming on webpage. If i make the changes at design time, it is working fine. Please let me know if anyone has idea over same. Thanks In Advance Arnold

Can you post your code?

------------------
When you ask a question, remember to click "mark as answered" when you get a reply which answers your question.


Hi,Pls find code for changing the tabpanel text at run time: TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1; TabContainer1.Tabs[1].HeaderText = Resources.Resource.tabpanel2;Please let me know what I am doing wrong?Thanks Arnold.
Any idea?

In which event do you use the code you provided?


In page_load function.

Are you creating any of the objects dinamically?


No, I have created same at design time.Thanks & Regards,Arnold

Oh, yes. One more question... What version of Visual Studio are you using?


What version of the toolkit are you using?

Try just setting your header to a fixed string to eliminate the complexity, e.g. TabConainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";

You also should be able to do something like HeaderText="<%$Resources:myResources, Welcome %>" in the ASPX. Seehttp://www.codeproject.com/useritems/localization.asp for more information.

-Damien


Hi Guys,

I am using ASP.NET 2.0 AJAX Extensions toolkit and I had already tried both ways few days back, but this was not working, that's why I have droped a forum here :-)

Please let me know whether this is a bug, or how can i fix this?

Thanks & Regards,

Arnold.


When you set a static string (e.g. TabContainer.Tabs[0].HeaderText = "Testing" or TabPanel1.HeaderText = "Testing";), do you still have the issue?

Assuming you do, it sounds to me like something in your code is overwriting your dynamic assignment. This is not a bug with the Toolkit as I have done this with version 10920.

By the way, you are confusing two different technologies... "ASP.NET 2.0 AJAX Extensions toolkit" isn't a version of the Toolkit. TheASP.NET AJAX 1.0 Extensions provide you with the UpdatePanel, ScriptManager, etc. while theAJAX Control Toolkit gives you all the extra controls like the Tabs, Accodion, etc. When I asked what version of the Toolkit you were using I was refering to the build number.

I suggest you try the 10920 build and see if you still are having the issue:http://www.codeplex.com/AtlasControlToolkit/Release/ProjectReleases.aspx?ReleaseId=4941. If you are, all signs point to a bug in your code. In that case, step through your program putting a watch on the TabPanel1.HeaderText seeing where it ends up being changed.

-Damien


Hi,I apologize for giving wrong information. Actually I am using ASP.NET 2.0 AJAX Extension and AJAX toolkit version 1.0.10920.0 both.And even I had tried in all the ways:TabContainer1.Tabs[0].HeaderText = "sample app";TabContainer1.Tabs[0].HeaderText = Resources.Resource.tabpanel1;in aspx file,">But nothing is working.In watch window, right value is displaying but on GUI, value is same as the design time value.Any efforts regarding same will be appreciated as this minor issue is taking so much of time.Thanks & Regards,Arnold

Ok, with 10920, I know for a fact it works. There is a problem somewhere in your code, something must be overwriting your tab's header. Do a search for "HeaderText" in your app to see if in fact it is being set somewhere else.

-Damien


Hi Damien,Thanks for reply. Issue has been solved finally.Issue was with headertemplate. headertemplate in aspx. was overwriting the information.Thanks & Regards,Arnold

Tabcontainer - Setting focus on tabs after postback

Is it possible to set the focus to a specific tab after postback or in event handlers.

Any help with this problem will be greatly appreciated.

me.TabContainer1.Tabs(index).Focus, there is an ActiveTabChanged event in the code behind as well.

Is that what your looking for? Also a new video has been posted on the tabContainer in the video's section of this site.

Burl

TabContainer - No Designer Support?

Hello,

I wanted to work with controls in the tab container's panel, but it does not seem that the control has any designer support for me to be able to do that at all? Is that true, or am I missing something? Will there be designer support, because that makes it difficult to make changes to the page.

Thanks.

Hi Bmains,

I suspect your Ajax Control Toolkit is not the latest version. Please upgrade toV10618 orV10920.

Best regards,

Jonathan

TabContainer - Multirow or/and scrolling ?

Hello !

I saw that scrollbars property of the tabcontainer reference the body of the tabcontainer...Is there some workaround for implementing of multirow or scrolling of the tabs in tabcontainer ? If NO , is there any ideas to be implemented such functionalities in further Ajax versions ? (for us it's very important desicion)...

Regards,

Toma.

Hello Toma!

I'm not sure if I have the same problem as you.

I need to have many TabPanels in the TabContainer, but the TabPanel headers appear in one line, even if the TabContainer width is set to a small size. Is it possible to have TabPanel headers broken into several lines, so that the TabPanel headers have the same width as the TabContainer (just like in WinForms)?

If you had the same problem please tell me how it was solved.

Many thanks,

VARGA Tamas


Hi,,Anyone had resolved this ? is there an attribute to make it multi row ?

thx allBig Smile


See Work item8843. It talks about this issue. Please vote for it if you would like to see the change.

kirtid:

See Work item8843. It talks about this issue. Please vote for it if you would like to see the change.


your link referenced:
The server has experienced an error.
CodePlex was having some issues that day. It is up and running now.
Hi all.

I resolved this problem with embeded style on the page.

<style type="text/css">

.ajax__tab_default .ajax__tab_header { white-space:normal !important }
</style

Shukhrat Karimov:

Hi all.

I resolved this problem with embeded style on the page.

<style type="text/css">

.ajax__tab_default .ajax__tab_header { white-space:normal !important }
</style

yeah, it works!
regards dude!

Thank you, I have used this css in my project and it works very well .

I need a solution just like here, in the edit profile page: a TabContainer which has many TabPanels inside, and if the browser window is resized,
the TabPanels headers adjust to the new size, breaking into two or more lines if necessary.

TabContainer - ActiveTabIndex not matching ActiveTab

I'm not sure if anyone has seen this, but I am experiencing the following:

I have a tab container when several (8) tabs.

On page load, I dynamically set the "Visible" property of particular tabpanels based on database values (security schema for what a user can see). Along with setting the visibility, I also set HeaderText = "" so that nothing renders at all.

The problem I am having is that if I set the first tabpanel (index=0) to not be visible, then the TabContainer seems to incorrectly associate ActiveTabIndex and ActiveTab. For instance, the container will correctly identify that the ActiveTabIndex = 2 (third tab), but the ActiveTab is referencing the second tab (incorrectly). It is as if setting a tabpanel to be invisible causes a mismatch between ActiveTab and ActiveTabIndex.

Has anyone else experienced this? It is not very hard to replicate, I am wondering if this is a bug with this control?!?!?!?

Thanks, in advance!

-Jim

Can someone replicate this issue? It should only take a few minutes...

I need to know if I am doing something wrong or if it is a bug in the control...


Hi,

I think that when a tab is set to visible="false", it does not get rendered to client. So, the next tab does get an index of 0. Sounds logical to me like that..

Maybe you could use Tabcontainer.ActiveTab = [id of tab] instead of index?

TabContainer + ActiveTabChanged + __doPostBack Problem

I have a tabcontainer that i want to postback only when certain tabs are clicked (lets call them "postback tabs")

Here is the setup:

<ajax:UpdatePanel ID="upOuter" runat="server" ChildrenAsTriggers="false" UpdateMode="Conditional">
<ContentTemplate>
<act:TabContainer ID="TabContainer1" runat="server" CssClass="MyTabStyle" ActiveTabIndex="0" OnClientActiveTabChanged="ActiveTabChanged">
....
....

<script language="javascript" type="text/javascript"
function ActiveTabChanged(sender, args) {
var ht = sender.get_activeTab().get_headerText();
if ((ht =="TabHeader1") || (ht =="TabHeader2") || (ht =="TabHeader3") ){
__doPostBack('<%= tabcontainer1.ClientID %>', sender.get_activeTab().get_headerText());
}
}
....
....

Server Side:

Protected Sub TabContainer1_ActiveTabChanged(ByVal senderAs Object,ByVal eAs System.EventArgs)Handles TabContainer1.ActiveTabChanged

If TabContainer1.ActiveTab.HeaderText = "TabHeader1"Then
....
....
End If
If TabContainer1.ActiveTab.HeaderText = "TabHeader2"Then
....
....
End If
If TabContainer1.ActiveTab.HeaderText = "TabHeader1"Then
....
....
End If
End Sub

This actually works quite well except in the following case:

Step 1. I click on one of the postback tabs

Step 2. Click on a non-postback tab

Step 3. Click back on the tab from step 1.

When I do this, the client side script runs, but the postback never happens. If on step 2, i clicked on a postback tab, everything works fine. Or, if on step three I click on a different postback tab than in step 1, everything works fine.

Any ideas?

Figured out the problem. The postback IS happening, but the server-side activetabchanged event was not firing. The reason for this is that when I clicked on a non-postback tab, the server was not notified of the change in activetab. So, following the steps in the original post, when I click back on to the postback tab in step 3 (the same as the postback tab in step 1), the server thinks the active tab is still the same - since it was not notified of the change in step 2. Hence, ActiveTabChanged does not fire on the server-side.

TabContainer & TabPanel bug?

On click of a tab, I validate the current tab. If the validation fails, is there a way to keep the current tab selected? I've tried using theActiveTabChangedfunction, but it never goes into the code.

Does anyone know how to select a tab with javascript?

One other thing, when you wrap a TabContainer in an UpdatePanel you get javascript error mesasge when use ajax call within the tab, so this seems to be an issue.

Hi,

Please try this to select a tab
function change() {
??????$find('TabContainer1').set_activeTabIndex(1);
}

Can you show me a small demo about?the?second question ?

Tabcontainer & Tabpanel

I just installed the AJAX Extensions and AJAX ControlToolkit. I'm trying to use the TabContainer and the TabPanel so I can have tabs on my ASP form. Here is my sample:

<ajaxToolkit:TabContainerID="TabContainer1"runat="server"ActiveTabIndex="0"CssClass="ajax__tab_xp">

<ajaxToolkit:TabPanelID="TabPanel1"runat="server"HeaderText="Tab one heading">

<ContentTemplate> Tab 1 Text

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

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelID="TabPanel2"runat="server"HeaderText="Tab two heading"Enabled="false">

<ContentTemplate> Tab 2 Text

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

<asp:CheckBoxID="CheckBox1"runat="server"/></ContentTemplate>

</ajaxToolkit:TabPanel>

</ajaxToolkit:TabContainer>

But when i go into Design view all i get is a grey 'TabContainer - TabContainer1' box. I would like to be able to view the tabs and add buttons, labels, textboxes, and pictures into each tab in design mode. Is there a way to do that or another option to look at for tabs in a web application?

We do not have extensive support for tabs in design mode. We do have awork item tracking it though. Currently you will have to customize tabs using the code view.

Are there other kinds of ways to use a tabpanel? For example, writing a seperate .aspx page and display that in each tab? I found you could use IFRAME's but is that the only way to do something like that? There were concerns about using frames that some browsers may block that from working, so is there another option to display multiple .aspx pages in one web window, in a tab panel?

Are there other kinds of tabpanels for asp?

Thanks!


merickson:

Are there other kinds of ways to use a tabpanel? For example, writing a seperate .aspx page and display that in each tab?

I wrapped the desired TabPanel content in a Web User Control. The user control can be edited in both views and the TabPanel simply contains the control, like so:

<ajaxToolkit:TabPanel runat="Server" ID="urlTabPanel" HeaderText="User Control">
<ContentTemplate>
<BaBu:MyUserControl runat="server" />
</ContentTemplate>
</ajaxToolkit:TabPanel>

--

babu


TabContainer - UpdatePanel Trigger

Hi,

I have a TabContainer with two TabPanel's. In one TabPanel is a Button with a Click Event. My UpdatePanel is out of the TabContainer and has a Trigger with Event of the Button (inside my TabPanel)...But it doesn't work... Can't find the Button...

 <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate>Tab Eins</HeaderTemplate> <ContentTemplate> <asp:Button ID="Button1" runat="server" Text="Button" OnClick="Button1_Click" /> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate>Tab Zwei</HeaderTemplate> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> <asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:TextBox ID="TextBox1" runat="server" Text="Hallo!"/> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="Button1" EventName="Click" /> </Triggers> </asp:UpdatePanel>
 Why I can't use the Event of the Button inside the TabPanel? 

Hi,

I try to find out solution, but what i find in tabcontainer the name of control get changed thats why at the time of rendering it is not find by updatepanel

I found a workaround for time being

<Triggers>
<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$Button1" EventName="Click" />
</Triggers>

I will try to get the correct solution if possible.


Hi,

OK, the same solution I found at the moment... But now I have a TreeView in the TabPanel and the Event is SelectedNodeChanged and when I try this:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel1$TreeView1" EventName="TreeView1_SelectedNodeChanged" />

It doesn't work...

Any Idea

Edit: Here we go:

<asp:AsyncPostBackTrigger ControlID="TabContainer1$TabPanel2$TreeView1" EventName="SelectedNodeChanged" />

works fine!


Hi,

Please use the following code snippet to register it:

ScriptManager1.RegisterAsyncPostBackControl(TabPanel1.FindControl("Button1"));

Hi,

I also have this problem,I have added trigger as you write but control out TabPanel not only loaded when click button but also loaded when I click any control in TabPanel.


Can you create a simple example about this?


Oh,it's my mistake.Your code is right.Stick out tongue

TabContainer - Two Components with the same id error

Hi. I've loaded the most recent AJAX Controls Toolkit and am using a TabContainer and TabPanels. I try to run a report from Oracle by clicking on an image button elsewhere on the screen, which should (and does) cause the report to be generated. It then is to switch TabPanels and show the report. At that point, I get:

Microsoft JScript runtime error: Sys.InvalidOperationException: Two components with the same id 'TabContainer1_TabPanel1' can't be added to the application.

I've researched on the forums and found a few proposed fixes to this issue. Unfortunately, none of them seem to work. Has anyone seen this with the TabContainer, and is there a fix? If I set debug=false in the web.config it goes away, but I realize that isn't truly a solution.

Regards,

Mark

Hi Mark,

I am having similar problem. My case was, I have a user control that contains MultipleSelectorExtender from ajax control toolkit. On my page, I need to hide and show this user control on a specific event. The first time I set the Visible property of this user control that contains the MultipleSelectorExtender, I am not getting any error. The next time that I attempted to set the visible property of the usercontrol to true, I got the error message "Sys.InvalidOperationException: Two componnents with same id '<multipleselectorextender's Id>' can't be added to the application."

It seems that the component was recreated again when the container wast set to visible.

Have you found solution to your problem? If so, kindly post it here.

tia,

/randz

TabContainer - Tabs look weird!

Why is the default style looking weird like this. I did not change anything from the original settings so why is this happening and how can I correct it?

hum... I only have this problem with IE6 and 7, it's looks fine with Mozilla.

<%@. Page Language="vb" AutoEventWireup="false" EnableEventValidation="false" CodeBehind="test1.aspx.vb" Inherits="ClientBase.test1" %><%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %><html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title> <link href="Styles.css" type="text/css" rel="stylesheet"></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <cc1:TabContainer ID="TabContainer1" runat="server"> <cc1:TabPanel HeaderText="Tab 1" runat="server"> <ContentTemplate> blabla 1 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 2" runat="server"> <ContentTemplate> blabla 2 </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel HeaderText="Tab 3" runat="server"> <ContentTemplate> blabla 3 </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </form></body></html>

I am sure that someone must have experienced this before. Any sugestions would be great.

Thanks


Yes, I have the EXACT same problem. When I have the page all by itself, it looks as expected. But when I put the page in a template, it gets those same strange white boxes that cut the tab text in 1/2. If you find a solution, please post it here for the rest of us!


A little more research brings me to this thread:http://forums.asp.net/p/1069041/1554327.aspx#1554327 - which discusses in detail the exact problem. It has to do with tabs in Master pages.


Thanks for your reply, this lead me toward the answer needed. It seems that because Quirks Mode is not supported by Ajax Tabs (not sur what quirks mode is exactly) that the page containning the tabs need the following DocType definition in order for it to show properly.

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

Tabcontainer - Setting Tab Visibilities

Hi

I have a tabcontainer with several tabs on ajaxaed page. I am trying to hide some tabs at postabacks according to selection made in a dropdown list. Everything works fine until some of the tabs receive focus, e.g. if I hit the button inside the panel (I am using update panel hence there is no postback) . In that case when I change dropdown list selection, tabcontainer display gets messy.

I tested it in Firefox and the error line is marked in bold bellow:
set_activeTabIndex : function(value) {
if (!this.get_isInitialized()) {
this._cachedActiveTabIndex = value;
} else {
if (value < -1 || value >= this.get_tabs().length) {
throw Error.argumentOutOfRange("value");

From that I can conclude that the tabcontainer is trying to set tab that last received focus as active tab. Because the tabs visibilities are changed at postbacks the script fails. Please correct me if I am wrong.

Any help with this problem will be greatly appreciated.

OK there is a solution - I was led to it by reading this thread:

http://forums.asp.net/t/1068120.aspx?PageIndex=1

The member with nickname howeird posted the one way to solve the problem:

In my case I change the client side function from:

<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = sender.get_activeTabIndex();
}
</script>

To:
<script type="text/javascript">
function ActiveTabChanged(sender, e) {
var activeTab = $get('<%=activeTab.ClientID%>');
activeTab.value = 0;
}
</script>

That will ensure that the tab with index No 0 is always set as active tab at postbacks.
NOTE: The client side function is only part of the solution read the rest of the poste for full implementation.

Thanx howeird