Ajax Toolkit Tab Panel

Hi there.

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

Kindly advice. Thanks.

Am using VS2005 and framework 2.0

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

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

Have already figured out the tabpanel.

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

Thanks for the reply.

Ajax Tookit Tab Control

I am all excited to get going with AJAX,

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

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

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

Not happy!!

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

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

O.K. how about a text box

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

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

this is how a tabcontainer looks like

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

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

AJAX Tabs

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

I'll give it a look tomorrow at work!

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

I'll get back to you,
Wim.

Ok smitty,

I made a small working example.

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

I got my inspiration here:

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

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

Thank you so much. This has solved my problem.

Thanks

Ajax TabControl

Hi there.

I am using a tabcontrol from the ajax control toolkit.

I have three tab panels inside a tab container.

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

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

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

Advice would be highly appreciated. Thanks.

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

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

Your advice would be highly appreciated as usual.

Thanks.

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

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

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

Hi Plz check this thread

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

Thank u

Baba

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

Hi BatutaBunsing,

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

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

Best regards,

Jonathan

Hi Jonatahn,

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

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

thanks.

Hi BatuaBunsing,

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

<%@. Page Language="C#" %><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><script runat="server"> protected void Page_Load(object sender, EventArgs e) { // We also can add below to TabContainer1_ActiveTabChanged(object sender, EventArgs e)

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

I hope this help.

Best regards,

Jonathan

ajax tab panel/tab container buggy

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

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

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

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

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

Thanks

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

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

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

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

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

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

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

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

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

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

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

I see...

Never used google maps in an app before...

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

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

Just an idea..

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

Hi Christopher

I found a little clumsy workaround, but it works!

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

I called the event like that:

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

gmarkers[0].closeInfoWindow()

This worked for me.

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

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

Thanks for your help on this

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

I changed the following line:

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

to

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

and the gap is gone...

Ajax Tab Panel and File Upload

Iam using ajax Tab Container , there i have one File upload , when i use that File Upload without ajax tab container it works fine , but in Ajax Tab Container it gives me an error that "Object reference is not set to instance of object", kindly help

regards

is it inside an update panel ??

the update panel is listed as not working with certain controls.

File upload, and tree view being 2 of the biggies.

IN any case, one solution is available on code project:

http://www.codeproject.com/useritems/simpleajaxupload.asp

if you look around the forums and google, you can read more aboutthe problem if your interested, but the code project solution shouldget you started.

From the online documentation:

http://ajax.asp.net/docs/overview/UpdatePanelOverview.aspx

Controls that Are Not Compatible with UpdatePanel Controls

The following ASP.NET controls are not compatible with partial-page updates, and are therefore not supported inside anUpdatePanel control:

TreeView andMenu controls.

AJAX Tab Control

Hi,

How can I able to check what AJAX Tab Container tab is selected in Code Behind?

thanks,

This works for me

Dim containerIdAsString ="TabContent" & TabContainer1.ActiveTabIndex

Where Tabcontent is the generic name for Tab1, Tab2 etc

AJAX Tab Container/Panel Styles

Hello,

Has anyone successfully overwridden the AJAX Tab Container styles? When I attempt to create custom styles for the tab container or tabs, all styling goes away completly on the tabs. I must be doing something wrong. Can anyone provide some clear examples of overwriding these styles? Thanks.

You can look here:http://www.asp.net/AJAX/Control-Toolkit/Live/Tabs/Tabs.aspx at theTabs Theming section for how to go about styling the tabs...

-Damien

I was working with overwridden themes for tabs, but it doesn't work sucessfully. After that, I copy from the masters css style for tabs and paste in my own css, but it doesn't work too...

It generate a problem in tabs with the margin automaticly assigned.

Please if someone can do work correctly the tabs whit personalized styles post the correct clases overwridden.

I have followed the asp.net/ajax toolkit tab theming information and I am still unable to get the styling to work. When I try to override the styles, I loose all styling all together. Does anyone have examples of working styles for the ajax tabs?

I've create a blog entry for you in regards to theming the tabs; along with the source code...http://blogs.visoftinc.com/archive/2007/09/26/ajax-control-toolkit-tab-control-themes.aspx

Hope this helps.

-Damien

I posted on your blog as well but what about styling the individual tab panels seperatley so that I can control each tabs style?

I followed your example and got the container styling working fine but I can't figure out how to control the tab panels individually.

Any ideas.

Try this link, I came across it today on Silverlight.net...

http://mattberseth.com/blog/2007/09/more_sample_ajaxcontroltoolkit.html

Thanks for the link. It isn't quite what I looking for though. He is placing different icons on the tabs by altering the header template.

What I need to do is give an entirely different style for each tab (header, outer, inner, body, and hover states). There may be some sort of CSS trick that can be done to accomplish this but my CSS skills are lacking.

You can assign a custom CSS directly to the tab. I'm not sure exactly of the syntax for this, but bascially you want to assign the CSS to the SPAN on line 1 inmy example

01 <spanid="..."class="ajax__tab_active">
02 <spanclass="ajax__tab_outer">
03 <spanclass="ajax__tab_inner">
04 <spanid="..."class="ajax__tab_tab">Tab 1</span>
05 </span>
06 </span>
07</span>

-Damien

Ajax Tab Container selected tab

I have a vb.net/asp.net 2005 app using an ajax tab container with tabs inside it.

I want the user to be able to click on a button as one way to get to the next tab. How do i display the next tab when the user clicks on a button.

Also, can I disable tabs where the user has not filled in information yet for the tab? IE: the user needs to fill in details on each tab page and the details are needed in sequence.

thanks.

Hi!

On the first one, you could put your TabContainer inside an UpdatePanel, set your button as a trigger and on the ButtonClick event set the TabContainer.ActiveTabIndex.

On the second one, you could use the same approach, using some kind of validation, catching the OnTextChangedEvent, so when you find that the user had filled up all the necessary information, you could enable a new TabPanel.
There are a couple of catchs here: Clicking on a TabPanel doesn't fire a post back to the server and I think that disabling a TabPanel won't just make it inactive, it will make it invisible. I'm not sure on the later, just give it a try.

Cherrs,