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.

TabContainer and DynamicServicePath

I am using a TabContainer and I would like to display the content of an aspx file inside each TabPanel of the TabContainer. I tried this code :

<ajaxToolkit:TabContainerrunat="server"ID="Tabs"Height="600px"Width="600px">

<ajaxToolkit:TabPanelrunat="server"ID="Panel1"HeaderText="Product Groups"DynamicServicePath="~/ConfProductGroup.aspx"Visible="true">

<ContentTemplate>

</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanelrunat="server"ID="Panel3"HeaderText="Products"DynamicServicePath="~/ConfProduct.aspx"Visible="true"/>

</ajaxToolkit:TabContainer>

But the tabcontainer doesn't display the content of aspx pages (ConfProduct.aspx , ConfProductGroup.aspx) when I click on a TabPanel.

Hi Suzi,

If you want to contain an entire asp.net page inside a TabPanel, you will probably need to fetch it prgramatically.

This video will show you how to do it.

http://asp.net/learn/videos/view.aspx?tabid=63&id=120

Joe

Thank you Joe for your advice. I am trying to test with this solution.

I am trying a sample example as you advice me. I have a Master page and an aspx page named Ajaxtab.aspx. I have no error when I test the Ajaxtab.aspx without a Master Page File. But if I add a master page file. I have an unknown error . Below, you will find my code. Thank you.

ajaxtab.aspx :

<%@.PageLanguage="C#"AutoEventWireup="true"MasterPageFile="~/Site.master"CodeFile="Ajaxtab.aspx.cs"Inherits="Tests_Ajaxtab"Title="MediterrumWorks : Ajaxtab" %>

<%@.MasterType

virtualpath="~/Site.master" %>

<%@.Register

Assembly="AjaxControlToolkit"

Namespace="AjaxControlToolkit"

TagPrefix="ajaxToolkit" %>

<asp:Content

ID="MainContent"

ContentPlaceHolderID="MainContent"

Runat="Server">

<divid="ResultId0"style="background-color:Aqua;"/>

</asp:Content>

and my master page :

<%@.MasterLanguage="C#"AutoEventWireup="true"CodeFile="Site.master.cs"Inherits="Site" %>

<!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">

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

<title>Mediterrum Works</title>

<linkrel="stylesheet"type="text/css"href="ajax__calendar.css"/>

</head>

<body>

<scripttype="text/javascript"language="Javascript">

function showHideLogo(){

var topbanner=window.document.getElementById('topbanner');

var arrow_top=window.document.getElementById('arrow_top');

if(topbanner.style.display=="none"){

topbanner.style.display="block";

document.images["arrow_top"].src="images/top_arrow_hide.gif";

document.images["arrow_top"].style.height="7px";

}else{

topbanner.style.display="none";

document.images["arrow_top"].src="images/top_arrow.gif";document.images["arrow_top"].style.height="7px";

}

}

function updateTime()

{

var label = document.getElementById('<%= CurrentTime.ClientID %>');

if (label) {

var time = (new Date()).localeFormat(" d/MM/yyyy ");var time = time +" " + (new Date()).localeFormat(" HH:mm ");

label.innerHTML = time;

}

}

updateTime();

window.setInterval(updateTime, 1000);

// Select a collection of CheckBoxList clicking on a CheckBoxList

function SelectAllCheckboxes(spanChk, chbxID)

{

var theBox= (spanChk.type=="checkbox") ? spanChk : spanChk.children.item[0];

xState=theBox.checked;

elm=theBox.form.elements;

for(i=0;i<elm.length;i++)if(elm[i].type=="checkbox" && elm[i].id!=theBox.id)

{

var checkbox = elm[i];

// If a search parameter was passed in

if(chbxID)

{

// Check only thos checkboxes with an ID containing that parameter

if(checkbox.id.search(chbxID) != -1)

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

// No search parameter, just check all checkboxes on the form

else

{

if(elm[i].checked!=xState)

elm[i].click();

}

}

}

</script>

<divid="container">

<formid="navtop"

runat="server"

style="margin: 0px">

<asp:ScriptManagerID="ScriptManager1"runat="server">

<Scripts>

<asp:ScriptReferencePath="WebRequest.js"/>

</Scripts>

</asp:ScriptManager>

<asp:HiddenFieldID="aspHFvisible"Value="true"runat="server"/>

<divid="topbanner">

<tablecellpadding="0"cellspacing="0"border="0"width="100%">

<tr>

<td>

<img

src="images/TerrumWorks.gif"

alt="Semantic Solutions"

style="margin: 0px"/>

</td>

<td>

</td>

<tdstyle="text-align: left">

<imgsrc="images/userOnline.gif"height="16px"width="16px"alt=""/>

<asp:LoginName

ID="LoginName2"

runat="server"/>

</td>

<tdstyle="text-align: right">

<asp:LoginStatus

ID="LoginStatus2"

runat="server"

LogoutAction="RedirectToLoginPage"/>

</td>

</tr>

</table>

</div>

<divid="div-menu">

<tablecellpadding="0"cellspacing="1"border="0"width="100%">

<tr>

<td>

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

<ContentTemplate>

<asp:Menu

DataSourceID="SiteMapDataSource1"

ID="Menu1"

runat="server"

CssClass="navmenu"

Orientation="Horizontal"

StaticTopSeparatorImageUrl="~/images/ToolSep.gif"OnMenuItemClick="Menu1_MenuItemClick">

<StaticMenuItemStyle

CssClass="menuitem"/>

<StaticSelectedStyle

CssClass="menuselected"/>

<StaticHoverStyle

CssClass="menuitemhover"/>

<DynamicHoverStyle

BorderWidth="1px"

CssClass="menuitemhover"/>

<DynamicMenuItemStyle

CssClass="menuitem"/>

</asp:Menu>

<asp:SiteMapDataSource

ID="SiteMapDataSource1"

runat="server"

ShowStartingNode="False"/>

</ContentTemplate>

</asp:UpdatePanel>

</td>

</tr>

</table>

</div>

<divid="toolbar"style="clear: both">

<tablewidth="100%"cellpadding="0"cellspacing="1">

<tr>

<tdalign="left"width="15%"style="border:solid 0px black">

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

<ProgressTemplate>

<table><tr><td>

<imgalt="Please Wait"height="13px"src="images/progressbar_long.gif"/>

</td>

<td>

<asp:Labelrunat="server"Text="Loading ..."/>

</td>

</tr></table>

</ProgressTemplate>

</asp:UpdateProgress>

</td>

<tdalign="left"width="35%"style="border:solid 0px black">

<asp:contentplaceholder

id="ContentPlaceHolderToolbar"

runat="server">

<asp:UpdatePanelID="aspUpdToolBarMessage"UpdateMode="Conditional"runat="server">

<ContentTemplate>

<asp:Image

ID="imgErrorMessage"

runat="server"

ImageUrl="~/images/red-error.gif"

Visible="True"Height="12px"/>

<asp:Label

ID="lblErrorMessage"

runat="server"

Visible="True"

CssClass="ErrorMessage"/>

<asp:Image

ID="imgLblMessage"

runat="server"

ImageUrl="~/images/info.gif"

Visible="True"/>

<asp:Label

CssClass="Message"

ID="aspLblMessage"

runat="server"/>

</ContentTemplate>

</asp:UpdatePanel>

</asp:contentplaceholder>

</td>

<tdalign="center"width="25%"style="border:solid 0px black">

<imgid="arrow_top"onclick="showHideLogo()"alt=""height="7px"src="images/top_arrow_hide.gif"/>

</td>

<tdalign="right"class="rightTable"width="25%"style="border:solid 0px black">

<spanid="CurrentTime"runat="server"class="toolbartime"/> |

<asp:Label

ID="AppVersion"

runat="server"

CssClass="toolbarversion"/>

</td>

</tr>

</table>

</div>

<divid="content">

<!-- Starting region layout for Sample Window -->

<asp:contentplaceholder

id="MainContent"

runat="server">

</asp:contentplaceholder>

<!-- Ending region layout for Sample Window -->

</div>

</form>

<divid="footer">

<tablewidth="100%"border="0">

<tr>

<td>

<address>

<asp:Literal

ID="footeraddress"

runat="server"

Text="<%$ Resources:Resource, FooterCopyright %>">

</asp:Literal></address>

</td>

<tdalign="right"valign="bottom">

</td>

</tr>

</table>

</div>

</div>

</body>

</html>

Hi,

I can't see where in your page is implementing incremental page.

Can you watch the video again and implement a similar feature?

If it still fails, can you provide a simpler page with less elements but include the problem you have?

Additional tip, you can useiFrame to include another form in current page.

TabContainer and TabPanel - Error Rendering Control, An unhandled exception has occurred.

I get this error in the designer when I place either TabContainer or TabPanel on any page in my project. I also get it if I look at the Tabs.aspx page in the toolkit sample website that comes with the source code. This has been happening for a while now and is rather anoying.

Anyone else get this error in the designer?

I only get it on the TabPanel
No resolution found yet

Are you saying that if you open Tabs.aspx from the SampleWebsite in the designer you get this error? Or when you run the page?

In either case, I don't see the problem. More info might help narrow it down.

Yes you do get this error if you have no ScriptManager control on your page. I assume you did the obvious and add one. Otherwise you've got an installation problem, because it works for me.

As of the Latest Release 23/01/2007 the errors are gone.

I'm looking at putting together a bit of a better designer for tabs hopefully for the next release.

Thank you for your time. I look forward to the next release.

Currently, I'm experiencing the same error with the latest release.

Have you tried the following:

Make sure there is a ScriptManager as the top most component of the page or if you have a ScriptManager on a MasterPage then make sure it is before your Content areas.

Have you tried the following:

Make sure there is a ScriptManager as the top most component of the page or if you have a ScriptManager on a MasterPage then make sure it is before your Content areas.

Have you tried the following:

Make sure there is a ScriptManager as the top most component of the page or if you have a ScriptManager on a MasterPage then make sure it is before your Content areas.

Have you tried the following:

Make sure there is a ScriptManager as the top most component of the page or if you have a ScriptManager on a MasterPage then make sure it is before your Content areas.
I am also haveing the same issue. I started a new AJAX Website from the template provided and when I drag a tab panel onto the page I get the above error. I don't have an old version since I just downloaded it today.

Did anyone figure out the solution to this? I too downloaded a new version, only this tool is still giving me a problem by not working at all.

TabContainer and TabPanel

I'm trying to build a fairly customized TabContainer... which contains TabPanels that can be closed or opened by the user (except the first TabPanel which is always available), also with different styles, colors, etc. How can the TabContainer be customized ? And does it support client-side closing/hiding TabPanels ?

Check out the sample:http://www.asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx

Check out the section namedTabs Theming for how to style the control.

-Damien

Thanks for the answer... but

What about allowing the user to close/open tabs without using code-behind functions?

I don't believe there is way to hide them client side. You can set theEnabled property though client side according to that link I sent you.

TabPanel Properties
"Enabled - Whether to display the Tab for the TabPanel by default. This can be changed on the client."

-Damien

tabcontainer by code

i have a ajax tabcontainer

i add tabpanel by code but ,

for example if i have 5 tabs and one is updated content i wanna blink or change the color of tabheader that has been update

Note: that 1 or more tabs can be updated so x tabs must change the color of header or blink

Regards

zulurl

protected void Page_Init(object sender, EventArgs e)
{

AjaxControlToolkit.TabPanel tab = new AjaxControlToolkit.TabPanel();
tab.HeaderText = "test_new_tab";

TabContainer1.Tabs.Add(tab);

tab.Controls.Add(LoadControl("WebUserControl.ascx"));

AjaxControlToolkit.TabPanel tab2 = new AjaxControlToolkit.TabPanel();
tab2.HeaderText = "test_new_tab2" + System.DateTime.Now;

TabContainer1.Tabs.Add(tab2);

tab.OnClientClick = "js";
tab.BackColor = System.Drawing.Color.Red;

{

}

}
with another way how do i refer document.getelementbyid(->the tab added...??
TabID.ClientID

TabContainer AutoPostBack. Load the tabPanels only when needed

Greetings!I have a TabContainer with various tab.

Each tabPanel contains a Gridview that contains different data. This way, each time the page loades or makes a postback ALL the gridviews perform the data access.

In order to increase performance at the first page_load, I want that the methods that load the Gridviews excecute only when the tab is activates. The solution that I tried was to capture the ActiveTabChange event. The problem is that the TabContainer doesn't have any AutoPostBack-like property.

Any ideas=

Hello,

There's a function on the TabContainer called OnActiveTabChanged

If you READ (yes READ) my post, you will see that I know that there is that event, and I also say that it doesn't solve by its own my problem. Yes I do capture that event and code the data access there. But when the user clicks on a tab, this event doesn't fire up, because this events activates on postback (for example, if anyone clicks a button).

Pleas avoid answering if you don't read the entire post.

Anyone with REALLY helpful ideas?

Oops, sorry. I guess I must have skipped that line of yours. Cheer.

TabContainer and Validator

I'm new to the toolkit... Can you use RequiredFieldValidator to validate a textbox when the user clicks on a different TabPanel in the TabContainer? I imagine that you can write your own JS. Thoughts?

Thanks!!!

Hi,

According to my understanding to your question, you are trying to prevent the other TabPanel from being actived if current TabPanel has validators that fail to validate. Isn't it?

As far as I know, the TabContainer doesn't expose an event that fires before the active panel is changed. So, you may try an alternative method. The basic idea is as follows:

1. Add an activeTabChanged event handler to the TabContainer
2. When a tabPanel is actived, save its index in a global variable
3. In the activeTabChanged handler, check if all Validators in previous tabPanel are valid. If not, set current active index to the index stored in global variable.

You may have the following code:

function pageLoad() {
tc = $find("TabContainer1");
tc.add_activeTabChanged(onChanged);
}

var index = 0;

function onChanged(sender, e) {
tc = $find("TabContainer1");
if( !Page_Validators[0].isvalid ){ // I assume validators[0] is in previous panel here. For practical usage, you may have to implement a strategy to organize validators in different panels
tc.set_activeTabIndex(index);
}
else{
index = tc.get_activeTabIndex(index);
}
}

Though this approach is not that straight, still hope this can helps.

TabContainer designer

Hi,

Is there any way to design TabPanel content from VS2005 designer (not from source view)?

I don't know if it is possible to add TextBoxes, Buttons... to TabPanels from designer - currently I do that manually in source view which significantly slows my coding.

i.e. Is there any way to design AJAX TabContainer like I can design TabControl in windows apps (drag&drop other controls into tab panels)?.

TabDesigner support is not available. Seeissue 7483.

TabContainer Control

Hi,

I am facing an issue with the tabcontainer control. Inside the tabPanel i have an updatepanel which contains a linkbutton set as a trigger to update the content of the tabPanel.

Somehow the server side click event of the linkbutton is not getting fired.

Below is my code snippet :

 <cc1:TabContainer id="Tabs1" runat="server" OnClientActiveTabChanged="ActiveTabChanged" Height="150px"> <cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="Inbox" CssClass="tabClass" > <ContentTemplate><!--E-Claims form system--> <asp:UpdatePanel ID="claimUpdate" runat="server"> <ContentTemplate><!--Panel to hide the content--> <asp:Panel ID="panel4" runat="server" CssClass="fontClass" BackColor="#082f73" width="682"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">E-Claim</div> <div style="float: right; margin-left: 20px;" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details" ForeColor="#ffffff"/> </div> </div> </asp:Panel><!--Content to show--> <asp:Panel id="panel3" runat="server"> <asp:UpdatePanel ID="updatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grid2" runat="server"> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lnk2" EventName="Click" /> </Triggers> </asp:UpdatePanel>   </asp:Panel> </ContentTemplate> </asp:UpdatePanel> <cc1:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." > </cc1:CollapsiblePanelExtender> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer>

I too am facing a similar issue.I have a simple tabcontainer control on a page and within its tabpanel, an asp:button. Clicking on the button doesnt raise any server side event. I have tried several things but nothing seems to work. The moment i remove the tabcontainer, it works just fine.

Thanks.

Hi,

I tried it, the click event handler fired. Here is my code:

<%@. 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 lnk2_Click(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"> <div> <input type="button" onclick="access()" /> <script type="text/javascript" src="JScript.js"></script> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager>   <ajaxToolkit:TabContainer id="Tabs1" runat="server" Height="150px"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server" HeaderText="Inbox" CssClass="tabClass" > <ContentTemplate><!--E-Claims form system--> <asp:UpdatePanel ID="claimUpdate" runat="server"> <ContentTemplate><!--Panel to hide the content--> <asp:Panel ID="panel4" runat="server" CssClass="fontClass" BackColor="#082f73" width="682"> <div style="padding:5px; cursor: pointer; vertical-align: middle;"> <div style="float: left;">E-Claim</div> <div style="float: right; margin-left: 20px;" > <asp:LinkButton ID="lnk2" runat="server" Text="Show Details" ForeColor="#ffffff" OnClick="lnk2_Click"/> </div> </div> </asp:Panel><!--Content to show--> <asp:Panel id="panel3" runat="server"> <asp:UpdatePanel ID="updatePanel2" runat="server" UpdateMode="Conditional"> <ContentTemplate> <asp:GridView ID="grid2" runat="server"> </asp:GridView> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="lnk2" EventName="Click" /> </Triggers> </asp:UpdatePanel> </asp:Panel> <ajaxToolkit:CollapsiblePanelExtender ID="CollapsiblePanelExtender2" runat="server" TargetControlID="panel3" ExpandControlID="panel4" CollapseControlID="Panel4" Collapsed="True" TextLabelID="lnk2" CollapsedText="Show Details.." ExpandedText="Hide Details.." Enabled="True" > </ajaxToolkit:CollapsiblePanelExtender> </ContentTemplate> </asp:UpdatePanel> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </div> </form></body></html>

TabContainer Firefox problem

I am using tabContainer for tabed navigation with update panels inside tabpanel for async updates to the server.

Ome tab panel contains FCKEditor. I have experinced 2 errors on the page when using Firefox:

1. The page is loading very slowly and the following message is displayed in the status bar:
"Transfering data from localhost"

2. FCKEditor when used inside tab panel and updatepanel will losse the text entered when I try to update asinc to the server.

I have tried the following solution but it did not work:
http://jlcoady.net/archive/2007/03/30/fckeditor-work-inside-updatepanel

The most relevant error in Error console seems to be the following:
Warning: Error in parsing value for property 'display'. Declaration dropped.
Source File:http://localhost:56780/WebResource.axd?d=MJBzFYTfWN4CIFiUGFH5fLnKi97ZUvWrbLbcxzkrjzR4fE38RehHyps3lRxPqwg76Z_83olVsuwUqCCjsO2ZJw2&t=633130226175471389
Line: 5

With the following data:

/* default layout */.ajax__tab_default .ajax__tab_header {white-space:nowrap;}.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}

There is also a bunch of css errors.

Needless to say everything works perfectly in IE 7.

Any help/suggestions will be greatly appreciated.

P.S. To isolate the problem - I have taken fckeditor out of the page and everything works fine. Then I added FCK Editor outside of update panel and tabcontainer and the problem reappeared, hence it is safe to conclude that the problem is related to FCKEditor.

Solved the problem.

FCKEditor subfolder containing all the setting,images etc for FCK Editor MUST be placed in the root folder of a web application. Probably there is a way to do it but it is not an issue any more.

TabContainer in Master Page, TabPanel in Content Page...does it work?

I just started a new project, and before I go wasting my time and energy on this concept, let me find out for certain. If in my Master Page, I declare a TabContainer, and between those opening and closing tags I put the declaration of the ContentPlaceholder, then in each Content page, the entireity of the content is inside a TabPanel...will that work? Can I do it that way at all, even if there have to be some workarounds? And if there are, what are those workarounds?

Appreciate any help anybody can offer!

Hi Ando,

Yes , you can do it like this .

<form id="form1" runat="server">
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolkit:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder1" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolkit:TabPanel>
<ajaxToolkit:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>
Tab2</HeaderTemplate>
<ContentTemplate>
<asp:ContentPlaceHolder ID="ContentPlaceHolder2" runat="server">
</asp:ContentPlaceHolder>
</ContentTemplate>
</ajaxToolkit:TabPanel>
</ajaxToolkit:TabContainer>
</form>

ContentTemplate works like a container(Div);

I hope this help.

Best regards,

Jonathan

Does this example only work on a certain AJAX.NET release (I'm current using release 10920)? It'll certainly be handy if this method worked :)

I've tried the above but I'm getting the following Exception:

System.Web.HttpException was unhandled by user code
Message="TabContainer cannot have children of type 'System.Web.UI.WebControls.ContentPlaceHolder'."
Source="AjaxControlToolkit"
ErrorCode=-2147467259
StackTrace:
at AjaxControlToolkit.TabContainer.AddParsedSubObject(Object obj) in d:\E\AjaxTk-AjaxControlToolkit\Release\AjaxControlToolkit\Tabs\TabContainer.cs:line 311
at System.Web.UI.Control.System.Web.UI.IParserAccessor.AddParsedSubObject(Object obj)
at ASP.presentation_masterpage_master.__BuildControlTabContainer1() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 16
at ASP.presentation_masterpage_master.__BuildControlform1() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 11
at ASP.presentation_masterpage_master.__BuildControlTree(presentation_masterpage_master __ctrl) in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master:line 1
at ASP.presentation_masterpage_master.FrameworkInitialize() in d:\Data\Visual Studio 2005\WebSites\PTOK\Presentation\MasterPage.master.cs:line 912306
at System.Web.UI.UserControl.InitializeAsUserControlInternal()
at System.Web.UI.UserControl.InitializeAsUserControl(Page page)
at System.Web.UI.MasterPage.CreateMaster(TemplateControl owner, HttpContext context, VirtualPath masterPageFile, IDictionary contentTemplateCollection)
at System.Web.UI.Page.get_Master()
at System.Web.UI.Page.ApplyMasterPage()
at System.Web.UI.Page.PerformPreInit()
at System.Web.UI.Page.ProcessRequestMain(Boolean includeStagesBeforeAsyncPoint, Boolean includeStagesAfterAsyncPoint)

Hi SpaceToaster,

I have tested on V10920 and it works pretty well. Please make sure that you have put the sample code inside the Master.page and make the content page as simple as possible. For example,

<%@. Page Language="C#" MasterPageFile="~/MasterPage.master" Title="Untitled Page" %>

<script runat="server">

</script>

<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" Runat="Server">
<%=DateTime.Now.ToString()%>
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder2" Runat="Server">
2131
</asp:Content>

I hope this help.

Best regards,

Jonathan

Hi Jonathan,

I don't see how the code you posted above is the same as the original example you have shown.

The exception was thrown after I've placed a ContentPlaceHolder inside a TabContainer.

Thanks,

Hi Spacetoaster,

My first reply provide Master Page code and the second reply provide the Content Page code. So combine them will get a test sample.

Would you please test it on your machine? I have tested it on IE7 and Firefox2. Please make sure the TabContainer which contains aContentPlaceHolder is located inside the Master Page. If this doesn't work, please feel free to let me know with a simple repro which certainly can reproduce your issue.

Hope this help.

Best regards,

Jonathan

Hello Jonathan ;

I m using the same style as you replied in post 2 of this thread. I can add my one .aspx page in first Contentplaceholder1 but cant add second .aspx page in the second Contentplaceholder2 which is in second tab?

FYI: I have two pageload events in these two different pages? Do i have remove one ??

Hi Saqib_dotnet,

saqib_dotnet:

FYI: I have two pageload events in these two different pages? Do i have remove one ??

Yes, or one pageLoad function will be ignored.

Best regards,

Jonathan

So i have two different aspx file.

Tab1.aspx and Tab2.aspx files.

I will keep Page_Load Tab1.aspx and remove from the other, then how the other page will be processed with the first page? I mean what will invoke the Tab2.aspx functions?

REgards

Hi Saqib_dotnet,

UserControls located in the same page works as these functions & controls are put in the same page. So you can call the function directly.

saqib_dotnet:

I will keep Page_Load Tab1.aspx and remove from the other, then how the other page will be processed with the first page? I mean what will invoke the Tab2.aspx functions?

Please make sure that the right function name is pageLoad but not PageLoad or Page_Load. I suggest that you can change the pageLoad function to a common js fucntion (modify name) and remain them in the original place. Then , add pageLoad function to the end of the page, now we can call the other functions on pageLoad.

Best regards,

Jonathan

Hi Saqib_dotnet,

If you mean server side method, all Page_Loads will be executed. If it is a client side function(javascript function), you should usepageLoad function.

Best regards,

Jonathan

I thought we are talking about the Page_Load event handler function ?

Is there any other function pageLoad?

Hi Saqib_dotnet,

That's based on your implementation. I think you should add breakkpoints and find out the exact root cause.

Best regards,

Jonathan

First of all i never went so far where I worked with JS functions. All i m using is ScriptManager and it looks like, it is handling everything.

Now my question is: I created master page with two tabs like described above. Then added two different aspx pages to the ContentPlaceHolders respectively. Both pages are in two different files and both have server side Page_Load functions.

Now when i run theApplication, only my defult page get populated in first Tab but not the other page which should be populated in second Tab.

Where the problem is?

Also, I m trying to load the second tab when user clicks it? What should I do for this as well.

Regards

TabContainer or TabPanel break focus

Hi,

this is probably a simple problem, but I can't find a solution in this forum. I'm getting started with the AJAX Control Toolkit and set up a quite simple testpage:

There is a table, in one cell there is an update panel with some textboxes. I can place focus on one of these boxes regularily using eg "this.TextBox2.Focus();" in Page.Load.

As soon as I put a TabContainer and a TabPanel around the update Panel, the focus doesn't work anymore. I tried several methods of setting focus described in this forum, it simply doesn't work.

Any hint would be greatly appreciated!

Kind regards,

Sven

Might be related to this post, but I wan't able to make any use of it:

http://forums.asp.net/thread/1485462.aspx

Sorry, I intended to point to this post as a related issue, but the other one might have the same problem with the accordion:

http://forums.asp.net/thread/1675357.aspx

I know how you feel. I looked for HOURS about how to do this. I finally found this somehow. Make sure you place this code at the BOTTOM of your ASP.Net page. It has to be at the bottom because the Sys has to come after the script manager. (or at least that is what it seems. It will give errors at the top.) Just replace txtPartNo with your control name.

<script language="javascript" type="text/javascript">
Sys.Application.add_load
(
function()
{
window.setTimeout(focus, 1);
}
)
function focus()
{
try
{
document.getElementById('<%=txtPartNo.ClientID %>').focus();
}
catch(err)
{
//do nothing
}
}
</script>

Have a great day!

~Secretxelf

Thanks, the code above works!!! I've been googling a similar problem for 2 days!

vb code = page.setfocus(control) and control.setfocus() and

html =<formid="form1"DefaultFocus="txtBox1n"runat="server">

don't work when you are using ajax updatepanel. The work around above does work.