Showing posts with label programatically. Show all posts
Showing posts with label programatically. Show all posts

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? 
 

Tab Panel problem

I'm trying to programatically change tabs from within javascript without having to go back to the server. After perusing some of the source code I landed on the following simple solution below. The problem I have is that it works in IE but not Firefox and I'm at a loss as to why. I've posted my working (in IE) copy athttp://ajax.jayhawk.net but the source below is complete. (The reason I need to do this is one of my tabs displays a google map and it doesn't draw properly if the tab is not initially visible, so the page loads with the map visible, but during the onload() code it switches to thereal first tab. I saw that some else had this issue but got no responses.)

Also, while I have your attention, I've found it difficult to learn the .NET-munged name of a control on the client side. For example, I have here ID="TabContainer1" and in this trivial example it doesn't change. However, in a more complex application it might be given the name "ctl00_ContentPlaceHolder1_TabContainer1". My "solution" to the problem is to add a hidden <div> at the end that contains nothing but "<%=TabContainer1.ClientID%>" and then use a document.getElementById to fetch the actual name which I can use with $find(). There's got to be a better way to do this, doesn't there?

Thanks in advance for the feedback, and thanks for some great tools!
-bp

<%@dotnet.itags.org. Page Language="VB" AutoEventWireup="true" CodeFile="default.aspx.vb" Inherits="_Default" %>

<%@dotnet.itags.org. Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="cc1" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title>Tabs Test Page</title>
<script type="text/javascript">
var tab = 0;
function changetab()
{
var strContainer = document.getElementById("divTabContainer1").innerText;
var container = $find(strContainer);

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}
</script>
</head>
<body>
<form id="form1" runat="server">
<cc1:ToolkitScriptManager ID="ToolkitScriptManager1" runat="server">
</cc1:ToolkitScriptManager>
<cc1:TabContainer ID="TabContainer1" runat="server" ActiveTabIndex="0" Height="142px"
Width="269px">
<cc1:TabPanel ID="TabPanel1" runat="server" HeaderText="TabPanel1">
<ContentTemplate>
This is tab #1
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel2" runat="server" HeaderText="TabPanel2">
<ContentTemplate>
Now you're looking at tab #2
</ContentTemplate>
</cc1:TabPanel>
<cc1:TabPanel ID="TabPanel3" runat="server" HeaderText="TabPanel3">
<ContentTemplate>
And, finally, it's tab #3!
</ContentTemplate>
</cc1:TabPanel>
</cc1:TabContainer><br />
<input type="button" onclick="javascript:changetab();" value="Click Me!" />
</form>
<div id="divTabContainer1" style="visibility: hidden;"><%=TabContainer1.ClientID%></div>
</body>
</html>

Hi,
I guess the reason is that innerText isn't a valid property for div element when work in Firefox. If you use a input element here, it works fine.
For instance:

var tab = 0;
function changetab()
{
var strContainer = document.getElementById("ipt").value;
var container = $find(strContainer);

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}

<input type="hidden" id="ipt" value=<%=TabContainer1.ClientID%> /
As a matter of fact, you don't need to use a element to hold its id, please try this:

</form>
<script type="text/javascript">
var tab = 0;
function changetab()
{
var container = $find("<%=TabContainer1.ClientID%>");

container.set_activeTabIndex( ++tab > 2 ? tab = 0 : tab );
}
</script>
</body>
</html>

Hope this helps.