Ajax TabControl and validation are incompatible - any way to resolve

Hi -

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

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

Oliver

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

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

Ajax TabControl

Hi there.

I am using a tabcontrol from the ajax control toolkit.

I have three tab panels inside a tab container.

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

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

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

Advice would be highly appreciated. Thanks.

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

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

Your advice would be highly appreciated as usual.

Thanks.

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

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

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

Hi Plz check this thread

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

Thank u

Baba

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

Hi BatutaBunsing,

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

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

Best regards,

Jonathan

Hi Jonatahn,

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

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

thanks.

Hi BatuaBunsing,

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

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

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

I hope this help.

Best regards,

Jonathan

AJAX TabConTainer & TabPanel

I have a TabControl on my page with about 5 tabs. The context in the first two tabs are fine. But from the third the context goes out of the border of the TabPanel. Any1 knows how to make the context stay within the border of the TabPanel...

After playing aroung with it. I found a solution. In the TabContainer properties just add a width to the width you want.

IE displays it correct when no width is included but Firefox & netsape are a bit fussy. So add it for it to be displayed in the other browsers correctly.

And you can resize the tabcontainer width with some javascript funtions onactivatabchanged...

That is, if you have various width tabs inside...