Saturday, March 24, 2012

Tab Panel - How do I move to a different panel programatically

I have a page with a tab container and two tab panelsOn the first tab panel is a gridview contained within an update panelI want to be able to click on a link in the gridview and have the page display the second tab.Whilst the gridview's selectedindexchanged event is firing the line:tabsXMatchResultPage.ActiveTab = tabXmatchResult;doesn't do anything.I can move between the tabs by clicking on them but I need to be able to move to the second panel from a click in the gridview.I have tried this with the update panel's UpdateMode set to "Always" and "Conditional" and that made no difference.(On other pages I have used the tabContainer.ActiveTab=requiredtabpanel statement in the page load event to display a particular tab at that point and that has worked fine) Thoughts on this would be much appreciatedThanksNeil

Bumping this message up the list as this is becoming a real pain and I need to know why the line

tabsXMatchResultPage.ActiveTab = tabXmatchResult;

isn't resulting in the activetab becoming the one requested.

The gridview's selectedindexchanged event is definitely being fired but the code to change the Active Tab doesn't do what it should.



I've now gone back to basics and created a new Ajax enabled web site.

The aspx page is:

<%@. Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolKit" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head id="Head1" runat="server">
<title>Changing Tabs</title>
</head>
<body>
<form id="frmAccessAccordion" runat="server"
<script type="text/javascript" language="javascript">
function ActiveTabChanged(sender, e)
{
__doPostBack('<%= MyTabs.ClientID %>', sender.get_activeTab().get_headerText());
}
</script
<asp:ScriptManager runat="server" ID="ScriptManager1" EnablePartialRendering="true"></asp:ScriptManager>
<ajaxToolKit:TabContainer ID="MyTabs" runat="server" OnClientActiveTabChanged="ActiveTabChanged"
OnActiveTabChanged="ActiveTabChangedServer">
<ajaxToolKit:TabPanel runat="server" ID="tabOne" HeaderText="One">
<ContentTemplate>
Tab One
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabTwo" HeaderText="Two">
<ContentTemplate>
Tab Two
<asp:Button runat="server" ID="btnServer" Text="Submit" OnClick="changeTab" />
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabThree" HeaderText="Three">
<ContentTemplate>
Tab Three
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
</form>
</body>
</html>
 
The Code Behind file is: 
 using System;
using System.Data;
using System.Configuration;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

public partial class _Default : System.Web.UI.Page
{

protected void Page_Load(object sender, EventArgs e)
{
ScriptManager1.RegisterAsyncPostBackControl(MyTabs);
}

protected void changeTab(object sender, EventArgs e)
{
MyTabs.ActiveTab = tabThree;
}

protected void ActiveTabChangedServer(object sender, EventArgs e)
{
if (MyTabs.ActiveTab == tabOne)
{

}

if (MyTabs.ActiveTab == tabTwo)
{

}

if (MyTabs.ActiveTab == tabThree)
{

}

}

}

 
From everything I have read the clicking of the button on tab two should result in the display of tab three... but it doesn't.
Can anyone else get this working successfully? 
 

No comments:

Post a Comment