tab control

dear All

I have a tab container with 2 tab panels (say tabpanel1 and tabpanel2). ONLY when tabpanel2 is selected I wanted an event to fire. can someone tell me how to do this?

a little code would be a great help.

prasad.

var tabs = $find('TabsBehaviorID');
tabs._addActiveTabChanged(YourHandlerHere);

You can then check the tab index in the handler and ignore if it is not tabpanel2.

it says unexpected character $ (Dollar sign)
This was clientside JS code that I posted that needs to be included in <script> tags...have you done that? Maybe if you could post some code that would help.

i dont quite understand..I just have a tab with two panels in the aspx code.

<cc1:TabContainer ID="TabContainer2" runat="server">
<cc1:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server">
<ContentTemplate>

</ContentTemplate>
</cc1:TabPanel>

<cc1:TabPanel ID="TabPanel2" HeaderText="Tab2" runat="server">
<ContentTemplate>

</ContentTemplate>
</cc1:TabPanel>

</cc1:TabContainer>

I want the following. When tab2 is selected, I want to do some calculations in the code behind...and display them in tab2.

on the other hand when tab1 is selected then I want nothing to happen.

How do I call this event? can you help me with some code behind?

prasad..

Ahhh...you want a server side solution. The tab container doesn't currently postback when a tab is changed so you have to force this to happen manually. The following code demonstrates this:

<asp:ScriptManager ID="ScriptManager1" runat="server" EnablePartialRendering="true" /><script type="text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('<%= TabContainer2.ClientID%>', sender.get_activeTab().get_headerText()); }</script><asp:UpdatePanel ID="UpdatePanel" runat="server" UpdateMode="conditional"> <ContentTemplate> <cc1:TabContainer ID="TabContainer2" runat="server" OnActiveTabChanged="TabContainer2_ActiveTabChanged" OnClientActiveTabChanged="ActiveTabChanged"> <cc1:TabPanel ID="TabPanel1" HeaderText="Tab1" runat="server"> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> <cc1:TabPanel ID="TabPanel2" HeaderText="Tab2" runat="server"> <ContentTemplate> </ContentTemplate> </cc1:TabPanel> </cc1:TabContainer> </ContentTemplate> <Triggers> <asp:AsyncPostBackTrigger ControlID="TabContainer2" EventName="ActiveTabChanged" /> </Triggers></asp:UpdatePanel>

You can then hook up to the event in the code behind as follows:
protected void TabContainer2_ActiveTabChanged(object sender, EventArgs e){}

thank you for the code, is it possible that there is a postback only when tab panel2 is selected and NOT when tabpanel1 is selected?

prasad.

sender.get_activeTab().get_tabIndex() will tell you which tab is the new active tab so you can selectively fire the postback.

thank you. that helped.

BTW do you know how to change the tabs background color? using the

<cc1:TabPanel ID="TabPanel1" BackColor="#CECABB" runat="server">

doesnt change the color.

prasad-

http://community.bennettadelson.com/blogs/rbuckton/archive/2007/02/02/Skinning-model-for-Calendar-and-Tabs-in-Ajax-Control-Toolkit.aspx
thank you a ton!

Hi everybody!!!

Hi Would like, How do to the Tab Painel to load the content..only when it is called...because, on this samples of Jason, the content is being loaded with a firts postback.... is it possible ?

I Need this, because i've five gridviews in my page, and this stays bad...

Thank all!!!

p.s: my english isn't good

You can use dynamic population via a web service using the Dynamic* properties of the tab panel control. If the tab panels need to contain server controls that postback, then you will have to create the tab panel controls during a postback (not via a web service).

Tab Index

hai,

i had placed tab control inside multiview panel which has the view index 1.in the page load event i show only view index 0.my problem is when i click the the button to change view index to 1,tab panel does not appear properly[i.e css not applied] and active index changed event also does not fire.how can i use tab panel inside multiview with visibility set to false.

thanks in advance

Hi,

Is your tab is displaying?,,,,,or not displaying....tab is usually coming with a default css (tab__xp)...if its ok..then check your web config..is it configured for ajax supporting...i think u created your website using File->Newwebsite->Asp.net website instead of this use File->New->website->Ajax enabled website...than ajax supporting tags will automatically comes in web config...please confirm this..if its ok then check your bin folder from ajaxtoolkit dll,if its not there copy that dll to bin folder..

Prajeesh

ASP.net developer

www.prajeesh.7p.com

Hi,

My Tab Panel is displaying,When I set the visibility of the tabcontainer to true at page load.If i set false at page load it does not viewed properly.please clear me i am new to ajax.i am using ajax enabled site only.

And i have another one problem now.

I have to create tab panels dynamically at runtime from database.But when i create like this i have one dropdownlist on that page.when i fire selected index change event for that dropdown it shows error like "Specified argument was out of the range of valid values.".

what will be the problem

thanks in advance

Can u show me your code to display and dynamically adding tabs?..it will be helpful to analyse the problem..

Regards,

Prajeesh

protectedvoid Page_Init(object sender,EventArgs e)

{

LoadModuleDetails();

}

protectedvoid Page_Load(object sender,EventArgs e)

{

if (!Page.IsPostBack)

{

LoadModuleDetails();

}

}

publicvoid LoadModuleDetails()

{

objdsMenu.Reset();

objdsMenu.Clear();

objdsMenu = objEmployee.MenuMaster(13);

if ((objdsMenu !=null) && (objdsMenu.Tables.Count > 0) && (objdsMenu.Tables[0].Rows.Count > 0))

{

for (int itabcnt = 0; itabcnt <= objdsMenu.Tables[0].Rows.Count - 1; itabcnt++)

{

AjaxControlToolkit.TabPanel TabPan =new AjaxControlToolkit.TabPanel();

TabPan.HeaderText = objdsMenu.Tables[0].Rows[itabcnt]["ModuleName"].ToString();

GridView grdPMS =newGridView();

//grdPMS.AutoGenerateColumns = false;

//BoundColumn bndmenuid = new BoundColumn();

//bndmenuid.HeaderText = "Menu ID";

//bndmenuid.DataField = "MenuID";

//grdPMS.Columns.Add(bndmenuid);

TabPan.Controls.Add(grdPMS);

TabContainer1.Controls.Add(TabPan);

}

//objds.Clear();

//objds.Reset();

//objEmployee.ParentID = 9;

//GridView grdPMS =(GridLines)Page.FindControl("grdPMS");

//BindMenuGrid(grdPMS);

}

}

Please give me source of aspx code also.....

Tab Panel - Problem in trapping Server Side Change Event

Hi,

This is related to the problem facing in trapping the Server Side Change Event of 'Tab Container - Tab Panel'

Below is the code:

<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="Change"OnActiveTabChanged="TabContainer1_ActiveTabChanged">
<cc1:TabPanel ID="TabPanel1" runat="server">
<HeaderTemplate>Tab 1</HeaderTemplate>
<ContentTemplate>Tab 1 Content</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server">
<HeaderTemplate>Tab 2</HeaderTemplate>
<ContentTemplate>Tab 2 Content</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

There are two events provided to handle Client & Server Side events seperately. Client Event works properly.

For reference : http://ajax.asp.net/ajaxtoolkit/Tabs/Tabs.aspx

Problem:The server side event is not working.

Quick help will be highly appreciated.

Regards,

Arun Manglick

Hi,

Here is the solution.

Add 'AutoPostback' property.

<cc1:TabContainer ID="TabContainer1" runat="server" OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="TabContainer1_ActiveTabChanged"AutoPostBack="True">

Reference : http://www.codeplex.com/AtlasControlToolkit/WorkItem/View.aspx?WorkItemId=7739

The solution seems to be strange. This solution is been added on 02Jun07. Before that it was a major challenge to overcome that.

Regards,

Arun...

Tabcontainer - Setting focus on tabs after postback

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

Any help with this problem will be greatly appreciated.

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

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

Burl

TabContainer - 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 DropDownList

Hi!

I've got a User Control that contains a DropDownList with AutoPostBack=true and theSelectedIndexChanged event is wired.

I've tested my User Control in a blank .aspx page and it works fine!

Now, if I add this User Control in a TabContainer and run it again, it stoppes behaving as it should: SelectedIndexChanged doesn't trigger and the list is empty after postback.

Has anybody experienced the same kind of problem?

Thanks!

Hi,

Please post your code so i can review it and then give you a logical explanation for this

Hi ,

You could try adding an UpadatePanel inside the Tab and then add the user control inside the Updatepanel.

George

TabContainer and ActiveTabChanged

Hi,

i have a problem with TabContainer.

The ActiveTabChanged server-side event doesn't fire when i click on tab.

Is this a bug?

Can anyone help me?

Thanks everbody!

I believe the server-side event will only fire when a postback occurs. Tabs doesn't use postbacks when simply switching between tabs. Maybe you'd like to use OnClientActiveTabChanged instead?

I ask this because I have this problem: I must load many data from database for each tab of tabcontainer.

So, I don't want to load all data from database only one time, but only if a user clicks on a tab.

I think there is no solution with this event (ActiveTabChanged).

Can you have some ideas to solve my problem with TabContainer?

Maybe with Webservice and pagemethods?
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to finda solution asap.
Can you please elaborate a bit on webservice and pagemethod. I have the same problem and need to find a solution asap.

Here is what start working for me (sure it is a temp solution but still...) Sorry for detailed instructions, but I believe in "documenting" everything to make a life easy.

1. Change javascript function to add a custom postback:

 function ActiveTabChanged(sender, e) { var CurrentTab = $get('<%=CurrentTab.ClientID%>'); CurrentTab.innerHTML = sender.get_activeTab().get_headerText(); //add a custom postback __doPostBack('Tabs', sender.get_activeTab().get_headerText()); Highlight(CurrentTab); }

2. In TabContainer add a method:

 <ajaxToolkit:TabContainer runat="server" ID="Tabs" Height="450px" OnClientActiveTabChanged="ActiveTabChanged"OnActiveTabChanged="ActiveTabChangedServer" >

3. Inside of TabPanels add an UpdatePanel wrapper and dont forget about trigger!

 <asp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"> <ContentTemplate> Datagrid, dynamic content etc </ContentTemplate> <Triggers><asp:AsyncPostBackTrigger ControlID="Tabs" EventName="ActiveTabChanged" /> </Triggers> </asp:UpdatePanel> <asp:UpdateProgress ID="UpdateProgressTabs" AssociatedUpdatePanelID="upTab_List" runat="server"> <ProgressTemplate> Refreshing Tabs...<img alt="" src="Images/loader.gif" /> </ProgressTemplate> </asp:UpdateProgress>

4. Register script in :

Protected Sub Page_Load ........ ScriptManager1.RegisterAsyncPostBackControl(Tabs)

5. Finally add the method you want:

 Public Sub ActiveTabChangedServer(ByVal sender As Object, ByVal e As System.EventArgs) lblTotalCount.Text = "Captured!!!!" End Sub

Outstanding! How about the use of a master page?

<script type="text/javascript"> function ActiveTabChanged(sender, e) { __doPostBack('TabsPublications', sender.get_activeTab().get_headerText()); }</script>

Then inside my content panel I have:

ajaxToolkit:TabContainer runat="server" ID="TabsPublications"OnClientActiveTabChanged="ActiveTabChanged" OnActiveTabChanged="ActiveTabChangedServer"ajaxToolkit:TabPanel runat="Server" ID="Panel1" HeaderText="All Publications"ContentTemplateasp:UpdatePanel ID="UpdatePanel1" runat="server"ContentTemplateasp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional"ContentTemplateasp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"Columnsasp:TemplateField ItemTemplateasp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLinkasp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label/ItemTemplate/asp:TemplateField/Columns/asp:GridViewasp:Label ID="lblTotalCount" runat="server" Text="Orig Load"/asp:Label/ContentTemplateTriggersasp:AsyncPostBackTrigger ControlID="TabsPublications" EventName="ActiveTabChanged" //Triggers/asp:UpdatePanel/ContentTemplate/asp:UpdatePanel/ContentTemplate/ajaxToolkit:TabPanelajaxToolkit:TabPanel runat="Server" ID="Panel3" HeaderText="Tab2" ContentTemplateDo Something.../ContentTemplate/ajaxToolkit:TabPanel/ajaxToolkit:TabContainer

Clicking a tab does a complete postback and does not save the tab state nor does it seem to executeActiveTabChangedServer.

I think you need this instead, to get the right client-side control ID:

__doPostBack('<%= TabsPublications.ClientID %>', sender.get_activeTab().get_headerText());

Dead on, however I now notice that if I have a datagrid that performs a postback it now longer works. Ideas?

yeap, worked for me with a CLIENT ID too. Excellent! Thanks for help.

You may avoid postbacks by adding javascript and modifying your Hyperlink to simple link. (just an idea ...)

/asp:GridView runat="server" ID="PubsGridView" AutoGenerateColumns="False" ShowHeader="False" CellSpacing="5" GridLines="None"
Columns
asp:TemplateField
ItemTemplate
asp:HyperLink ID="HyperLink1" NavigateUrl='%# Bind("articleUrl") %' runat="server"asp:Label ID="Label1" runat="server" Text='%# Bind("articleName") %'/asp:Label/asp:HyperLink
asp:Label ID="Label2" runat="server" Text='%# Bind("Abstract") %'/asp:Label
/ItemTemplate
/asp:TemplateField
/Columns
/asp:GridView

Anyone got this to work when the scriptmanager is on the master page?

Yeah, and how do you guys get javascript working?

I have been trying to figure out how to do postback from Tab Container and this thead have helped me out to resolve this. Thanks guys!!!!!!!!!

Hello, I want to do the same thing, be able to load data from server eachtime I click on a Tab.

I read this forum and try the code provided, and also the code from thispage : http://willys-web.blogspot.com/2007/02/aspnet-ajax-control-toolkit-tab-control.html

The code from willy-web does work when I run it separatly in a new web site,from Visual Studio 2005. Try it, it works. When I put a break point in the codeinside the function ''DoServerSideValidation", I have a break when I clickon the second tab.

Perfect, I said, just have to fit it in my code. But even by copying the codeI can not run my freaking ''DoServerSideValidation" function !

I know it is possible, take a lookhereandhere . But I'd like to do it myself...

Lets have a look to the javascript function :

functionActiveTabChanged(sender, e)
{
alert('Hi !');
__doPostBack('<%= tabs1.ClientID %>', sender.get_activeTab().get_headerText());
}

This code is called, as I see a winpopup "Hi !" displayedwhen I click on one of my tabs...

Here is my TabContainer properties :

<cc1:TabContainerrunat="server"ID="tabs1"
OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="DoServerSideValidation">

DoServerSideValidation is never triggered. If someone can help me tounderstand where is the link between " __doPostBack('<%= tabs1.ClientID%>', sender.get_activeTab().get_headerText()); "

and my function DoServerSideValidation...

And why the code from willy-web doesn't not work inside my web project. Isit because I use a control ascx ? so in the page load I do this ScriptManager.GetCurrent(this.Page).RegisterAsyncPostBackControl(tabs1);

You know what is funny ? The code I search is used when you are editing apost, here in this forum. (Tabs "Compose", "Options","Related", "Preview").

Ok, if someone have an idea of how this TabContainer works ... It would beappraciated...

Thanks for your help.

TabContainer and OnActiveTabChanged

Hi,
I read a lot of posts about the OnActiveTabChanged event but I would like to know what would be the best way to load dynamically the content of the selected Tab.
Here's my needs.
I have a tabcontainer with 3 tabs and I want to load the content on fly when the user selects a tab (of course without reload the entire page).
If someone could post the right code, that will be great.

Thanks in advance.
Stan

I think the best way to do this is to:

1) Put an UpdatePanel around the TabContainer

2) Hook the ActiveTabChanged event

3) When it fires for a given tab, add the content in the postback

Note there is a known issue with the TabContainer in an update panel - it's a cosmetic issue where you can see it redraw on postback.

OK I sat down and did a sample of this that loads each panel when the user selects it.

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

TabContainer doesnt throw ActiveTabChanged Event!

Hi,

I am dynamically adding the tabs to the TabContainer control in the Page_Init event.

These are recreated everytime the page loads.

However when I change the selected tab on the client side and do a postback the ActiveTabChanged Event doesn't fire.

Any ideas?

I am having the same problem. Everything else is working except for the firing of this event. Anyone have a workaround?
yes, found the same problem. had a brief look at the source but couldn't find a obvious answer. bit of a showstopper for me, If anybody has a solution even if it to amend the source I would be happy.
http://forums.asp.net/thread/1556226.aspx?

TabContainer in an Update Panel dissappears after an event is fired in an update panel

Hello :

I have a TabContainer in an Update Panel. When ever an event fires in an update Panel such as Button onclick , the TabContainer dissappears.

I also tried to move update Panel inside the TabPanel . I tested this at 2 different Places. One is on a Page and the other sits in a panel that is displayed by Modal Popup. When the event fires , the one in the Page is still visble and I have a JS error . The one that sits in the ModalPopup dissappears with same JS error.

Here is the error , I am seeing

this.get_element() has no properties

_app_onload(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 217)

(no name)()ScriptResource.ax... (line 50)

_handler(Object _disposableObjects=[9] _components=Object,Object _components=[9] _isPartialLoad=true)ScriptResource.ax... (line 2503)

Sys$_Application$raiseLoad()ScriptResource.ax... (line 3754)

Sys$WebForms$PageRequestManager$_pageLoaded(false)ScriptResource.ax... (line 1191)

Sys$WebForms$PageRequestManager$_scriptsLoadComplete()ScriptResource.ax... (line 1229)

(no name)()ScriptResource.ax... (line 50)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3297)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$_loadScriptsInternal()ScriptResource.ax... (line 3290)

Sys$_ScriptLoader$loadScripts(0,function(),null,null)ScriptResource.ax... (line 3198)

Sys$WebForms$PageRequestManager$_onFormSubmitCompleted(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 1177)

(no name)()ScriptResource.ax... (line 50)

_handler(Object _webRequest=Object _xmlHttpRequest=XMLHttpRequest,Object)ScriptResource.ax... (line 2503)

Sys$Net$WebRequest$completed(Object)ScriptResource.ax... (line 4458)

_onReadyStateChange()ScriptResource.ax... (line 4009)

this.get_element().style.visibility = 'visible';

Can any please let me know how this problem can be resolved.

Thanks,

Rajesh

After little struggle , I found that TabstripContainer when in update Panel disappears.

For Ex i have this secnario :

<Page>

<updatepanel>

<usercontrol>

<TabStripContainer></TabstripContainer>

</usercontrol>

</updatepanel>

</Page>

The TabstripContainer in UserControl dissappears when an even fires in UserControl.

So i need to arrange the above as follows

<page>

<usercontrol>

<TabStripContainer>

<TabPanel>

<updatepanel

</updatePanel>

</TabPanel>

</TabstripContainer>

</usercontrol>

</page>

Hopefully this issue will be resolved. cause update panel is being used alot for partial rendering.

I have the same problem with TabContainer disappearing after a click on a button outside of it when both the TabContainer and the button are contained in an UpdatePanel.

Are there any solutions for this problem yet?

I must have the button in same UpdatePanel as TabContainer, but visually below the container.

Have you seen this thread:http://forums.asp.net/thread/1549317.aspx

Thank you very much! This fixes the bug! Sorry for not searching forums thoroughly enough.

So I understand that we need to modify Tabs.js dispose method

to dispose : function() {
Sys.Application.remove_load(this._app_onload$delegate); // this is missing
AjaxControlToolkit.TabContainer.callBaseMethod(this, "dispose");
}

But how are you explicitly using the TabContainer to use this Javascript. I am using AjaxControlKit.dll with no source code.

So what I did is I copied Tab.js into my project and modified the dispose method. And for the tabcontainer , I pasted the path to this Tab.js in

ScriptPath property7.But then I am getting a Type 'AjaxControlToolkit.TabPanel' does not have a public property named 'System.Web.UI.Control'.

What am i doing wrong here.

I took the sources of AjaxControlKit.dll and recompiled them after making the change in Tabs.js
Yep , basically , Jason Hill did the same thing.And it worked.
Yep , basically , Jason Hill did the same thing.And it worked.Thanks
Yep , basically , Jason Hill did the same thing.And it worked.Thanks guys
Note we did a refresh release yesterday (10201) and this issue is addressed in that release. It's available from CodePlex.

TabContainer preventing the user from switching tabs if some textbox changed in a previous

Hello,

I have a TabContainer control with 3 tabs. On each tab I dynamically add textboxes. Each one of the textboxes has an OnTextChanged event. What I am trying to do is, to prevent the user from being able to switch between tabs if some of the text has changed in the textboxes, but the save button was not clicked.

So what I really want to do is, to detect when a user clicks on a different tab, then check my current tab see if any of the textboxes were updated and if they were I don't want to allow the other tab to be selected. Can someone please give me some hints or an example of how I can do this?

Thank You,

Vadim

You can hook into the tab changed event as follows:

var tabs = $find('TabsClientID');
tabs.add_activeTabChanged(YourHandler);

In YourHandler, you can do the necessary checks to see if the user should be moving away from a tab and return them to the previous tab if the checks fail. You will need to track the active tab index manually so that you can return them to the correct tab.

Jason

So calling the tabs.add_activeTabChanged(serversideHandler), will cause a postback correct? I will need to be able to pop up an alertbox or something like it notifying the user that they can't switch tabs from the serverEvent. Is there a way to cause some javascript to run from a function on the server?

this is my tab control here:

<cc1:TabContainer ID="tbcSettings" OnActiveTabChanged="ActiveTabChanged" runat="server" Width="300" Height="300">
<cc1:TabPanel ID="tbpGlobal" OnClientClick="ActiveTabChanged" TabIndex="0" BorderWidth="2" runat="server" HeaderText="Global">
<ContentTemplate>
<asp:UpdatePanel ID="upTab_List" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListGlobal" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tbpCommercial" OnClientClick="ActiveTabChanged" TabIndex="1" runat="server" HeaderText="Commercial">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel1" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListCommercial" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="tbpMedicaid" OnClientClick="ActiveTabChanged" TabIndex="2" runat="server" HeaderText="Medicaid">
<ContentTemplate>
<asp:UpdatePanel ID="UpdatePanel2" runat="server" UpdateMode="Conditional">
<ContentTemplate>
<slc:SettingList ID="settingListMedicaid" runat="Server" />
</ContentTemplate>
<Triggers>
<asp:AsyncPostBackTrigger ControlID="tbcSettings" EventName="ActiveTabChanged" />
</Triggers>
</asp:UpdatePanel>
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer>

<script language="javascript">

function ActiveTabChanged(sender, e)
{
__doPostBack('<%= tbcSettings.ClientID %>');
}

</script>

c# code:

protected void ActiveTabChanged(object sender, EventArgs e)
{
//bcSettings.ActiveTabIndex = ((AjaxControlToolkit.TabContainer)sender).ActiveTabIndex;
//((AjaxControlToolkit.TabContainer)sender).
string tabname = tbcSettings.Tabs[((AjaxControlToolkit.TabContainer)sender).ActiveTabIndex].HeaderText;
switch (tabname)
{
case "Global":
stl = settingListGlobal;
break;
case "Commercial":
stl = settingListCommercial;
break;
case "Medicaid":
stl = settingListMedicaid;
break;
default:
break;
}
if (!stl.Saved)
{
string js = @."if (alert('you made changes, do you want to save now'))";
js += "{";
js += "__doPostBack('" + btnSave.ClientID + "');";
js += "}";

Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "savepostback", js, true);
}
}

No, the sample code I provided was for clientside handling of the event when the tab is changed...it does not cause a postback. The tab container is supposed to be able to automatically postback when a tab is changed although I have seen some posts that indicate that this might not be happening correctly. Check the forums to see if this is working or not.

Personally, I think it might be a nicer user experience to handle all of this clientside but understand if this is not practical. This would make it easier to show the alert and would avoid extra postbacks.

One thought...do you have to save the changes to every tab individually or can you just have a save button that saves the stuff in all of the tabs in one big go. This sounds like it would eliminate the problem altogether.

Well, I would rather make them press save before moving between tabs, but it seems like what I want to do is a pretty complicated task.

My take on tabs is that they are more designed for segmenting content and that the user can hop around with quick clientside UI control. I think this creates a better and snappier user experience. What do you gain by forcing the user to save every tab first? Sure, you can still have a save button on every tab so that the user can save their changes if they want to, but why force them to do it? It's the same as most tabbed windows in the Windows UI...you get an option to hit an Apply button to save your changes so far or continue changing settings on multiple tabs until you are ready to save.

TabContainer Server Side Event within Master Pages

I want to fire a server side event on the tab change event and I am sure it is not working beacuse of the use of a master page. Any thoughts how to get this working proerly?

1public void TabContainerPublications_ActiveTabChanged(object sender, EventArgs e)2{3string strTest;4if (TabContainerPublications.ActiveTabIndex == 0)5 strTest ="Made It!";6}

In the web form is the following:

1<asp:Content ID="Content1" ContentPlaceHolderID="ContentPlaceHolder1" runat="Server">2 <asp:ScriptManager ID="PublicationsScriptManager" runat="server">3 </asp:ScriptManager>4 <div id="publicationsheaderimage">5 </div>6 <div id="fullCol">7 <h2>8 Publications</h2>9 <ajaxToolkit:TabContainer ID="TabContainerPublications" runat="server" OnActiveTabChanged="TabContainerPublications_ActiveTabChanged">10 <ajaxToolkit:TabPanel ID="TabPanelAllPublications" HeaderText="All Publications" runat="server">11 <ContentTemplate>12 <asp:GridView runat="server" ID="GridViewAllPublications" AutoGenerateColumns="False"13 ShowHeader="False" CellSpacing="5" GridLines="None">14 <Columns>15 <asp:TemplateField>16 <ItemTemplate>17 <asp:HyperLink ID="HyperLink1" NavigateUrl='<%# Bind("articleUrl")%>' runat="server">18 <asp:Label ID="Label1" runat="server" Text='<%# Bind("articleName")%>'></asp:Label></asp:HyperLink>19 <asp:Label ID="Label2" runat="server" Text='<%# Bind("Abstract")%>'></asp:Label>20 </ItemTemplate>21 </asp:TemplateField>22 </Columns>23 </asp:GridView>24 </ContentTemplate>25 </ajaxToolkit:TabPanel>

As it turns out this was not my real issue. Since I wanted to execute a server side event I had to wrap the Tabs in an Update Panel.

TabContainer server event

Hi

I try to use TabContainer control and his event OnActiveTabChanged.

I have a simple page such as

<

cc1:TabContainerID="TabContainer1"runat="server"OnActiveTabChanged="TabContainer1_ActiveTabChanged"><cc1:TabPanelID="Tab1"runat="server"><ContentTemplate>

...

</ContentTemplate></cc1:TabPanel>

</

cc1:TabContainer>

And function

protectedvoid TabContainer1_ActiveTabChanged(object sender,EventArgs e)

{

string test ="sdfds";

}

But when i click on Tab and change active tab server event not fired.

Where is a problem?

Thanks

According to the documentation, the event should fire during a postback to the server, not in response to the tab being clicked.