Showing posts with label container. Show all posts
Showing posts with label container. Show all posts

Wednesday, March 28, 2012

Tab container - Progressive enhancement

I am new to AJAX and the control toolkit.

I read about "Graceful degradation/Progressive enhancement" on another site and I am wondering how I can code for it when I use a tab container. I was testing with the AJAX tab container/tab panel but when I disable javascript in the browser, the page with the tab is blank. On some sites using tabs, the result of turning javascript off is different. The page shows atleast the first tab's information but nothing happens when the second tab is selected.

I realize I can add a message - "this site needs javascript to be turned on" or redirect the user to another page if javascript is disabled. I am wondering if there is anything else I can do so the page does not show up blank.

Thanks!

Hi,

May be you can try this.

Add a pure text-based header, set its visibility to hidden via javascript on load.

So that it will be visible if the javascript is disabled.

Hope this helps.


The Toolkit is not supported to work if javascript is turned off. The behavior may not be tuned to gracefully degrade and it is not a scenario we plan to solve since the Toolkit controls all operate in client side ASP.NET AJAX behaviors which need javascript to be turned on and it may be hard to do the same. If you are using the Toolkit on sites which may be expected to work when javascript is turned off then it may need to be taken care of in your code.

Tab container

hi all,

i have placed the tab container in side a datagrid. tab container will appear in the item command of datagrid. if i set the active tab index as zero. i got some error.

57 line 17 char

argument out of range exception

1495 line 38 char

this.get_element().style is null or not an object.

if i remove that active tab index property tab container works fine.

how to close the tab container?

please help me

Balaji

Hi Balaji,

Can you show me your relevant code so that I can reproduce your issue?
A stripped simpler version of your code would be better.

Looking forward to your reply.

hi,

here is my code snippet

protectedvoid dlHostels_ItemCommand(object source,DataGridCommandEventArgs e)

{

tabcontainer tbc=new tabcontainer();

tbc = (TabContainer)dlHostels.Items[e.Item.ItemIndex].FindControl("TabContainer1");

Label lblInfo =newLabel();

TabPanel tp = new tabpanel();

tp.controls.add(lblinfo);

tbc.controls.add(tp);

//i have added three panels to this tabcontainer.

tbc.activetab=0; // problem with this tabindex. if i didnt mention anything then it works fine.

}

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

I have seen the tab container inside an update panel and with out any update panels.

Which is correct?

Thank!

Dennis4j,

The only reason I put the TabContainer inside of an UpdatePanel is when I have an "editable" GridView inside one of the tabs. I can't remember where I read this, but in order for the tab control to keep track of the correct tab when the grid goes into edit mode this had to be done. I think it was logged as a bug but I don't have the details handy.

Regards.

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 and tab panels

I'm getting what I think is odd behavior from the tab panels. Everything of course works fine if the tab panels are static. However, I want to programmatically add to the tab container in my code behind.

The first time the page loads the outline of the tab container is present (which is fine). I click a button and do a postback for the update panel and two tabpanels are added to the tabcontainer. If I do another postback, then I get an error "There is no source code available for the current location." message box. I click OK. I then get a message box that says, "ArgumentOutOfRangeException was unhandled by user code ....Specified argument was out of range of valid values...Parameter name: index".

For example,

"UpdatePanel1" runat="server" UpdateMode="Conditional"> "TabContainer1" runat="server"> "HiddenField1" runat="server" OnValueChanged="HandleNodeClick"/>public void HandleNodeClick(Object sender, EventArgs e){ AjaxControlToolkit.TabPanel panel1 =new AjaxControlToolkit.TabPanel(); panel1.HeaderText ="panel1"; panel1.Visible =true; panel1.ID ="panel1"; AjaxControlToolkit.TabPanel panel2=new AjaxControlToolkit.TabPanel(); panel2.HeaderText ="panel2"; panel2.Visible =true; panel2.ID ="panel2"; TabContainer1.Controls.Add(panel1); TabContainer1.Controls.Add(panel2);}
As a workaround I tried the following, which didn't work either. I have three different formats of tabcontainers I want to use. I tried just putting the three different tabcontainers on the aspx page to begin with. In the code behind, on page load I set .visible=false for all 3 (which worked as expected). Based on an event, I then set .visible=true for a given tabcontainer. However, only the text of the desired tabcontainer is displayed -- the formatting, the panels, etc. aren't. Suggestions for either of these approaches is much appreciated.

In my case I have successfully created the tabs and the buttons on them - they display just fine and the tabs select. However, as soon as I click on any of the buttons the same error arises. Setting an eventhandler for each button does not cure the problem.

I am very keen for a quick solution!


Further investigation shows that the problem does not even relate to adding controls to the tab but arising even if adding tabs dynamically.

I added a button outside the tab and then just did the tab adding.:

Dim FC()As cCategory = cCategory.AllCats
Dim iAsInteger
For i = 0 To FC.length-1
Dim tab As New AjaxControlToolkit.TabPanel
tab.HeaderText = FC(i).TabName
tab.ID = "tab" & CStr(i)
tbForms.Tabs.Add(tab)
NexttbForms.ActiveTabIndex = 0

A click on the static button then produces the error message.

It seems as if the wiring up of the postback info is incomplete with the dynamically created tabs.


OK guys - I found most of the answer from another thread - use Page_Init

However . . .

ProtectedSub Page_Init(ByVal senderAsObject,ByVal eAs System.EventArgs)HandlesMe.InitDim FC()As cCategory = cCategory.AllCats
Dim iAsInteger
For i = 0To 0
Dim tabAsNew AjaxControlToolkit.TabPanel
tab.HeaderText = FC(i).TabName
tab.ID ="tab" &CStr(i)
Dim FM()As cForm = cForm.Tab(FC(i).TabId)
Dim FMname(FM.Length - 1)AsString
Dim jAsInteger
For j = 0To 0
Dim btnAsNew Button
btn.Text = FM(j).Description
btn.ID ="btn" &CStr(i) &":" &CStr(j)
AddHandler btn.Click,AddressOf ButtonClick
tab.Controls.Add(btn)
FMname(j) = FM(j).Description
Next
tbForms.Tabs.Add(tab)
Next
EndSub

PublicSub ButtonClick(ByVal senderAsObject,ByVal eAs System.EventArgs)
EndSub

This fires a postback OK but this never reaches the ButtonClick routine.

Why?


Making progress very slowly!

The Page_Init is performed every time a postback occurs (Before Page_Load) and at that time the dynamically added control do not exist (they have to be re-created each time around, it seems) If I test for postback at the start of Page_Init and do not do the dynamic creation at that time, then the same error as before occurs.

I do not fully understand what is going on but I guess that the postback cannot connect up with the event handling which was created the first time around. Presumably I need to find some way of working out what the postback actually is and look at it explicitly.

Any ideas, folks?


I think I'm hitting the same issue.

I've added two tab panels to my TabContainer statically. The tab panels host the ReportViewer control which is possibly a bit ambitious but it is a business requirement if possible.

Then in the Page_Load event handler I add a third tab panel dynamically with the following code block :

ReportViewer rv = new ReportViewer();
rv.ID = "rv3";
rv.ProcessingMode = ProcessingMode.Remote;
rv.Height = 500;
rv.Width = 950;
rv.Reset();
SetReportParameters(rv, 53); // this just inits the reportviewer

AjaxControlToolkit.TabPanel tabPanel = new AjaxControlToolkit.TabPanel();
tabPanel.ID = "tab3";
tabPanel.HeaderText = "Dynamically added tab panel";
tabPanel.Controls.Add(new LiteralControl("<ContentTemplate>"));
tabPanel.Controls.Add(rv);
tabPanel.Controls.Add(new LiteralControl("</ContentTemplate>"));
//this.tabReports.Controls.Add(tabPanel);
this.tabReports.Controls.AddAt(tabReports.Controls.Count, tabPanel);

This all works fine but it's not really dynamic yet. So I then add a button to the page outside of the TabContainer and in the event handler for it I use a similar code block to the above except I use a different TabPanel.ID. This is when I run into the problem. Before the button event handler code is entered I'm getting the ArgumentOutOfRangeException and VS dumps me into the TabPanelCollection.cs class in the TabPanel method.

public new TabPanel this[int index]
{
get { return (TabPanel)base[index]; }
}

In my case index=2 and the Exception tells me the it is out of range of valid values. What is confusing me is that my code to insert the new panel hasn't been run yet so something else must be going on. In order to speed up diagnostics on this I'm going to remove the ReportViewers and put in some simple controls but in the meantime it would be good if someone from the AJAX team could comment on this issue.

I've now got wroking code - but at the price of a fudge!

Firstly, the dynamic creation must be done in Page_Init (not Page_Load) and must be done on every Postback, not just frst time through.

Secondly, in Page_Load on Postback, I check the Page.Request.Form collection. Despite all that I have read, there is nothing in the first few entries but (4) there is the full name of the control and its text value.

Dim sAsString = Page.Request.Form.AllKeys(4)
If s.ToLower.StartsWith("tbforms")Then
Dim s1()AsString = s.Split("$")
Dim s2AsString = s1(1).Substring(3)
Dim s3AsString = s1(2).Substring(3)
Dim tabNoAsInteger =CInt(s2)
Dim btnNoAsInteger =CInt(s3)

I am far from happy with this as it depends on an undpecified magic number (which, as we all know, chnages just when you can least afford it!)

I still suspect that there is a bug lurking somewhere here.

Tab Container and IE Scrollbars

I am looking for any guidance in resolving an issue that I have run into with the Tab Container. The page that is using this container cannot be navigated using the Browser Scrollbar by clicking on the bar and dragging or using the arrows. Navigation can be done by using the wheel on the mouse or by double clicking on a position on the scroll bar.

Any help is greatly appreciated.

Regards,

Mike

Hi Mrheihardt,

mrheinhardt:

The page that is using this container cannot be navigated using the Browser Scrollbar by clicking on the bar and dragging or using the arrows.

We cannot reproduce your issue. Here is my test sample and it works pretty well on IE 7 and Firefox 2.0.

<%@. 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">

</script>

<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" 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">
<ajaxToolkit:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>
Tab1</HeaderTemplate>
<ContentTemplate>
<asp:Panel ID="Panel1" runat="server" Height="900" Width="100%">
<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>

Please compare my sample with yours. I use Ajax ControlToolkit V10618. If your version is lower, would you please upgrate it? In this sample ,I use a Panel to shown the content. If it doesn't work on your machine, please provide your sample and system environments here.

I hope this help.

Best regards,

Jonathan


I also face this problem under IE6. But it works fine under IE7.

Tab Container and GridView

Hello

Does any peopel try to use the GridView Paging with the Tab Container? It is because when I try to click to page 2.

Following problem occurred.

Specified argument was out of the range of valid values.
Parameter name: The StartRowIndex '10' is out of range. Current item count is '0'

Hi Hnchan,

Here is the sample which you can reference to. 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"></script><html xmlns="http://www.w3.org/1999/xhtml"><head id="Head1" runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager> <asp:Panel ID="Panel2" runat="server"> <ajaxToolkit:TabContainer ID="TabContainer1" runat="server"> <ajaxToolkit:TabPanel ID="TabPanel1" runat="server"> <HeaderTemplate> Tab1</HeaderTemplate> <ContentTemplate> <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="3"> <Columns> <asp:BoundField DataField="EmployeeID" HeaderText="EmployeeID" InsertVisible="False" ReadOnly="True" SortExpression="EmployeeID" /> <asp:BoundField DataField="LastName" HeaderText="LastName" SortExpression="LastName" /> <asp:BoundField DataField="FirstName" HeaderText="FirstName" SortExpression="FirstName" /> <asp:BoundField DataField="Title" HeaderText="Title" SortExpression="Title" /> <asp:CommandField ShowEditButton="True" /> </Columns> </asp:GridView> <asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NORTHWNDConnectionString%>" SelectCommand="SELECT [EmployeeID], [LastName], [FirstName], [Title] FROM [Employees]"></asp:SqlDataSource> </ContentTemplate> </ajaxToolkit:TabPanel> <ajaxToolkit:TabPanel ID="TabPanel2" runat="server"> <HeaderTemplate> Tab2 </HeaderTemplate> <ContentTemplate> <asp:TextBox ID="TextBox2" runat="server"></asp:TextBox> </ContentTemplate> </ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer> </asp:Panel> </form></body></html>
Also you can add an UpdatePanel and put the GridView inside the UpdatePanel .Thanks.
Best regards,
Jonathan

I am sorry to say that it still does not work. Is this the problem related the ObjectContainerDataSource from WCSF?


Hi Hnchan,

So what's your Ajax Control Toolkit's version? Mine is V10618.

hnchan:

Is this the problem related the ObjectContainerDataSource from WCSF?

It's hard to say.Would you please wholly copy my source code and have a test.If all these don't work, we really need more information to find out the exact root cause.

I hope this help.

Best regards,

Jonathan

TAB CONTAINER AJAX TOOLKIT

Good Day!!!I'm trying to used Tab Container (Ajax Toolkit) but i need more than 20 tab panels in 1 tab container. The problem is the tab panels I added in the tab container is not fixed to the tab container. Can you help me to fix my problem thank you...marc

Hi

The problem is the tab panels I added in the tab container is not fixed to the tab container?What do you mean?

Please refer to http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx for help.

Tabs Description

TabContainer is an ASP.NET AJAX Control which creates a set of Tabs that can be used to organize page content. A TabContainer is a host for a number of TabPanel controls.

Each TabPanel defines its HeaderText or HeaderTemplate as well as a ContentTemplate that defines its content. The most recent tab should remain selected after a postback, and the Enabled state of tabs should remain after a postback as well.

Thanks


hi Good Day! I have a tab container with 16 tab panels, and I set the width style of the tab container (770px) , the problem is the other tab panelsis not fixed to the 770px(width of the tab container) and continuesly going to the right. Hope you can help me to my problem thank you.

Tab container & Tab panel

Hi

I am trying to customize look n feel of tab panel's Header Text -- by giving a hover effect or a different background image to tabs. I could not see any way of achieving it.

Where is the location of class ajax__tab_xp? If I create my own class, the separate tabs disappear.. How to apply or modify the stylesheet class??

Thanks in advance for your help.

Anyone guyz? AJAX experts? Please help.

I will greatly appreciate a line of working code for this.. Thanks in advance.


Hi,

Here is a code snippet demonstrate using custom style on tabContainer.


<style type="text/css">
.ajax__tab_xp2 .ajax__tab_header {
font-family:verdana,tahoma,helvetica;
font-size:21px;
background:
repeat-x
bottom;white-space:normal;
}
.ajax__tab_xp2 .ajax__tab_outer {
border-style: solid double;
padding-right:4px;
background:
no-repeat
right;
height:21px;
}
.ajax__tab_xp2 .ajax__tab_inner {
padding-left:3px;
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_tab {
height: 100px;
padding:4px;
margin:0;
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_outer {
background:
no-repeat
right;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_inner {
background:
no-repeat;
}
.ajax__tab_xp2 .ajax__tab_active .ajax__tab_tab {
background:
repeat-x;
}
.ajax__tab_xp2 .ajax__tab_container .ajax__tab_default {text-align:center; background-color:Blue;white-space:normal;}
.ajax__tab_xp2 .ajax__tab_body {text-align:center; background-color:Blue; font-family:verdana,tahoma,helvetica;font-size:10pt;border:1px solid #999999;border-top:0;padding:8px; border-style:none; border-color:Green; border-bottom-style:none; border-left:none; border-right:none; border-top:none; }
.ajax__tab_xp .ajax__tab_body {
font-family:verdana,tahoma,helvetica;
font-size:10pt;
border:1px solid #999999;
border-top:0;
padding:8px;
background-color:#ffffff;
}
</style>

<ajaxToolkit:TabContainer CssClass="ajax__tab_xp2" ....................


This question is being asked soooo many times...

Maybe this'll help:

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

And maybe someone should put this in the FAQ (if it isn't already there)..


Thank you Raymond.. your post has solved my problem 95%.. great!

Quick question, on Hover I have:

.ajax__tab_xp2 .ajax__tab_hover .ajax__tab_inner {
/* background:no-repeat; */
font-weight:bold;

due to this, all tabs move or drift little bit (due to font weight change) on Mouse Over.
How can I avoid this?

Thanks & I mark this as answer!Yes


Thank you NNM, for the post link. I totally agree with other member -- TabPanel/Container controls are so "non-intuitive" .. if changing style on tab control must be done through css then why can't MSFT write a single line or provide a sample in their AJAX demos!! I spent freaking hours in figuring this out ...

Believe it .. I am gonna have questions when I start actual coding with Tab Controls! ..Hmm

Sam


sdekha76 :

Try changing thepadding value. There's no fixed answer to padding value, since I think it depends on the font size.

edit: the tab styling may seem non intuitive at first, but once you play around with it a bit, you'll be able to customize it completely, even changing the background images. I really love this toolkit control.

Tab Container Issue - Inside of Update Panel

I was attempting to have a tab container hidden (visible = false) when I load the page inside of an Update Panel. After entering in some search criteria and pressing load, the tab container would become visible, or so I thought. What I got was all of the tabs' header text just written out on one line with the first tab visible and no container. Has anyone ran into this or know a work around? Outside of that, I think this would qualify as a bug or need to be noted in the documentation that you cannot change the visibility of a Tab Container inseide of an Update Panel and expect it to work correctly.

PS. Toggling the visibility of the Tab Containers works fine when the Tab Container is outside of an Update Panel.

Hi,

I fail to reproduce the issue. Can you show me your code?

Tab Container Height

This is more of a display question than anything, but I wasn't sure where else to ask, so here goes :)

I've got 2 table cells right next to each other. One of them is much taller than the one that has my tab container in it. Is there a way I can programatically set the height of the tab control so that it's forced to be as tall as the other table cell? Or heck, if it could just fill up the cell it's in, that'd be fine.

Any help is appreciated, much thanks!

-- Dan

Use the height attribute.


rpack79:

Use the height attribute.


How can I apply the height attribute dynamically based on the size of the cell next to it? I can't assign a height in pixels to it, everything is sized to scale.


Post your code and I'll show you.


How about using % instead of px.

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 Container Error after a Refresh

I have a tab container with two tab panels inside of it, and they work perfectly well the first time the page is loaded. If I hit refresh (not post back I am talking F5 or the browser refresh button) the page loads up except for the tab container which does not show up.

The error I receive in IE is the following

Line: 6
Char 31345
Error: Object Expected

When I run this in Firefox and check the error in FireBug It tells me the following error occurred

h is not a constructor

createCallback(undefined,Object,null,Object,div#ctl00_mainContent1_ComparisonPieCharts1_TabContainer1_PublisherTab)ScriptResource.ax... (line 5)

(no name)()default.aspx (line 988)

createCallback(Object _disposableObjects=[2] _components=Object,Object)ScriptResource.ax... (line 5)

createCallback()ScriptResource.ax... (line 5)

createCallback()ScriptResource.ax... (line 5)

Function.__typeName="Function";Function.__class=true;Function.createCallback=fun...

Thanks in advance for your help,

Brendan

I set my ScriptMode for my scriptmanager to Debug and now I found that the error message is really

Sys.ArgumentUndefinedException: Value cannot be undefined.Parameter name: type

Sys$CultureInfo$_getAbbrMonthIndex("")ScriptResource.ax... (line 5762)

{name: "element", mayBeNull: true, domElement: true, optional: true}


Hi Brendan,

Can you post a simple repro of your issue?

Tab Container doubts

Hi,

I have two questions regarding the Tab Container Control:

1) How can I get the current Tab in the code behind ?

2) if I have five tabpanels, with one grid view on each one and I want to use the updatepanel.

should I create one updatepanel and place all the tabpanels on it, or create one updatepanel for each tabpanel ?

Thanks !

I haven't tried your Tab / Update Panel combinations, but getting the current TabIndex in your server code is easy.

Dim TabNoAsInteger

TabNo = TabContainer1.ActiveTabIndex

Remember Active.TabIndex is Zero based so if you have 4 tabes and the last one is selected, the active index will be "3"


Hi,

Personally, I'd place different UpdatePanel for each tab. Haven't done this ever too, you may have a try and know if it works.


The Tab / Update panel combination worked smothly by using a diferent updatepanel for each tabpanel, like Raymond suggested.

If you want, you can use an update progress like this:

<asp:UpdateProgressID="UpdateProgress1"runat="server"AssociatedUpdatePanelID="Tabs$Panel1$upd1">

Thanks Joe and Raymond,

Skynyrd

Tab container disappears when client script added

If I write this:

<cc1:TabContainerEnableViewState="true"runat="server"ID="TabContainer1"Width="100%"

Height="490px"ScrollBars="Auto"ActiveTabIndex="1">

everything works fine. I'd like to detect client side which tab was clicked. If I write ...

<cc1:TabContainerEnableViewState="true"runat="server"OnClientActiveTabChanged="hello()"ID="TabContainer1"Width="100%"

Height="490px"ScrollBars="Auto"ActiveTabIndex="1">

... the tab container is not displayed when the page is viewed in a browser. The function being called - hello() - is just a simple

function hello()

{

alert('hello');

}

If I add 'onClientClick' to the tab itself - same thing happens. Tab container is not displayed.

<cc1:TabPanelID="tbContact"runat="server"onClientClick="hello()"HeaderText="Contact Summary">

Any idea what is wrong? From what I have read it should work.

Thanks for any help.

Hi,

Based on my test, it worked fine.

I suspect there is something else that break it. Can you provide a simple repro of the issue?

tab container: tab panel appears but not the controls in it

Hello,

I have a ajax tab container with 4 tab panels. each panel has arround 30 to 40 controls.later I added another(5th) panel with text box control. The new panel appears, but the control in it is not displayed.

When I tested again with a new file,new tab container, with 7 to 8 panels with no controls. I just added 1 single control to 8 th panel. This time it displays properly.

I am unable to figure out whether it is problem with tab container control, because it has too many controls? I am using ajax control toolkit version 1.0.10301.0.

(or)

problem with the html content I wrote.Here is my code.Pls help.Its urgent

<divid="divMain"style="overflow: auto">

<cc1:TabContainerID="TabContainer1"runat="server"Visible="true"ActiveTabIndex="2">

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

<HeaderTemplate>

Call Handling</HeaderTemplate>

<ContentTemplate>

<tablewidth="98%"style="height: 98%">

<tr>

<tdalign="center"colspan="5"class="aimTableH">

<asp:Labelrunat="server"ID="Label29"CssClass="aimth2"><b> Call Handling</b></asp:Label></td>

</tr>

<trclass="aimTableH"align="center">

<td>

<asp:Labelrunat="server"ID="lblEscalate"CssClass="aimth2"><b>Escalate</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label1"CssClass="aimth2"><b>Lead Type</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label2"CssClass="aimth2"><b>Maximum Attempts</b></asp:Label>

</td>

<td>

<asp:Labelrunat="server"ID="Label3"CssClass="aimth2"><b>Word Tracks</b></asp:Label>

</td>

<td>

<asp:LabelID="lblEmailRecipients"runat="server"CssClass="aimth2"><b>Email Recipients</b></asp:Label>

</td>

</tr>

</table>

</ContentTemplate>

</cc1:TabPanel>

.

.

.

.

.

.

.

<cc1:TabPanelrunat="server"ID="TabPanel2">

<HeaderTemplate>TESTING</HeaderTemplate>

<ContentTemplate>

<tablewidth="98%"height="100%">

<tr>

<td>

<asp:TextBoxrunat="server"ID="txt1"></asp:TextBox>

</td>

</tr>

</table>

</ContentTemplate>

</cc1:TabPanel>

</cc1:TabContainer>

</div>

<tablewidth="98%"height="100%">

In bold, that is an error... Style="height:98%" is an error too...

My guess is maybe your controls are hidden by the table...

Another tip: if you have too many controls in each tab, maybe try seperating the contents into iframes... Easier to debug..

Tab Container/Panel with Master Page

I have a VB.Net/Asp.Net 2005 application and I would like to use a Master Page with a tab control

Inside the master page I have a tab control with five Tab Panels and I would like to put a ContentPlaceholder inside each tab's ContentTemplate but I am not allowed to do that. Does anyone have any good samples using Tab Containers/Panels inside a master page like this?

thanks

Hi,

As you've discovered, it can't be used this way unless you change the access modifier of TabPanelContainer to public and rebuild it.

Tab Container within an Update Panel

I am working on a page that contains a grid within an update panel. The user selects an item from the grid, popping up a draggable panel with the details of the item they selected.

I want to be able to have a tab control within the pop up, but am running into some issues. The backgrounds of the tab headers dont show up. It looks to me like the styles arent getting sent to the browser because the control is being added to the page through the update panel. When I move the tab control outside of the update panel, or add another one to the page that is visible on page load it looks fine.

I was about to add another tab container to the page and set the display to none but that seems like a hack. I was wondering if there is any other way to get the styles for the tab container down to the page on load without having to do something like that.

Thanks for the help in advance,
James Hollister
Ascending Integration Inc.
www.AscendingIntegration.com

The tab control should be outside that UpdatePanel or inside a new UpdatePanel to work. Makes sense?

If you, please post the code and let's figure it out.


I'm having the same issue with the TabContainer styles not being sent to the browser, did anyone find a solution for this?

The tab container itself contains ajax functionality

Most Controls that contain built in ajax functionality dont work well in an UpdatePanel because the javascript does not gets send in an update panel during partial updates

You will need to keep the tab container outside of an update panel.

This however causes the problem of the tab container state not being updated from the code behind. For example i was not able to change the active tab from code behind in a partial postback.

The turnaround for this was that i used javascript

the below code shows how exactly

first io create a javascript function to change the active tab index

function ChangeTab(indx)

{

$find('<%=TabContainer1.ClientID%>').set_activeTabIndex(indx)

}

$find('<%=TabContainer1.ClientID%>') gets a reference to the tab container object in the javascript

then called this from code behind using the following

ScriptManager.RegisterStartupScript(Me, updButtonBar.GetType,"KEY","ChangeTab(2);",True)

here the me is the page and updbuttonbar is the update panel . It can be any update panel in the page.

In this way you can manipulate the tab container by calling any of the methods of the tab container javascript object.

If you want to find the listing of the methods save As the page containing the tab container as a complete web page on ur local hard drive

in one of the resources file u can find the methods the javascript object tab container contains or perhaps download the ajax control toolkit source

This ways was good enough for me.

Let me know if it helps

Cheers

Sohail Sayed


No this is not true - UpdatePanel does incremental loading of the scripts.

I'm not able to repro this. On the sample page, I wrap the TabContainer in an UpdatePanel and it works fine.

Can someone please post a repro?


I would do, but the situation in which this problem has arisen for me is a little bit complicated, since i'm building a custom webpart based draggy droppy affair. The TabContainer is in an UpdatePanel, which is in another UpdatePanel, and i'm creating it programatically.

I'll have a quick play, and see if i can get it to happen in a simpler scenario.


Ok, this is a much simplified reproduction of my page, but it causes the "bug". I need to add a TabContainer dynamically as the result of a button press, and in the following conditions, it appears with no styles on it.

<html xmlns="http://www.w3.org/1999/xhtml" ><head runat="server"> <title>Untitled Page</title></head><body> <form id="form1" runat="server"> <div><asp:ScriptManager ID="ScriptManager1" runat="server"></asp:ScriptManager> </div><asp:UpdatePanel ID="UpdatePanel1" runat="server"><ContentTemplate><asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional"><ContentTemplate><asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="Button" /></ContentTemplate></asp:UpdatePanel></ContentTemplate></asp:UpdatePanel> </form></body></html>
 
 
protected void Page_Load(object sender, EventArgs e) { }protected void Button1_Click(object sender, EventArgs e) { AjaxControlToolkit.TabContainer tbc =new AjaxControlToolkit.TabContainer(); AjaxControlToolkit.TabPanel tbp1 =new AjaxControlToolkit.TabPanel(); tbp1.HeaderText ="Test Panel 1"; Literal ltrl1 =new Literal(); ltrl1.Text ="Panel 1 Content"; tbp1.Controls.Add(ltrl1); tbc.Tabs.Add(tbp1); AjaxControlToolkit.TabPanel tbp2 =new AjaxControlToolkit.TabPanel(); tbp2.HeaderText ="Test Panel 2"; Literal ltrl2 =new Literal(); ltrl2.Text ="Panel 2 Content"; tbp2.Controls.Add(ltrl2); tbc.Tabs.Add(tbp2); UpdatePanel2.ContentTemplateContainer.Controls.Add(tbc); }

The problem that I am having along these lines is that when either the TabContainer itself or whatever container it is in (ex. Panel) is set to Visible=false; then on the partial page load the styling is not loaded. From my understanding it adds a <link> to the header when the page is loaded but this doesn't work if the control was not visible when the page was initially rendered. When the TabContainer is rendered everything is there and it works but you can't see the tab but only the HeaderText. All of the styling is lost.

Any idea of how to get around this? My thought was to add the <link> when the page is first loaded but I'm can't find anything about how to do this.

Luke


I'm having the same problem.

If I create a TabContainer dynamically (through OnInit) or initially set the TabContainer.Visible = false, the styling does not load.


Hi,

Unfortunatelly TabContainer does not properly load CSS if it first appears on the page in UpdatePanel with async update postback. However, it is quite easy to solve this, by adding an empty TabContainer somewhere to the page, but utside any UpdatePanel. Empty TabContainer without any Tabs does not render anything noticable to the page, but it loads CSS which is later used by other TabContainers.

So, add a TabContainer without pages to your page and make sure it is not in UpdatePanel and it its Visible = true.

-yuriy
http://couldbedone.blogspot.com


That did the trick. I added the following code and it works just like I want it to.

</asp:UpdatePanel>
<ajaxToolkit:TabContainerID="tabNotUsed"runat="server"Visible="true"/>

Thanks for the help!

Luke