Ajax tool kit tab panels provide an easy means of implementing tabbed interface in asp.net applications. There may be situations which require you to change the active tab property from client side script. For instance consider you have two tabs with text fields and validation controls in one of them, and with a post back button in another tab. When you click on the post back button without entering valid values for the text fields, postback will not happen as the validation fails. But validation messages will also not be visible as they reside inside another tab. In order to make the tab with validation messages visible, the set_activetabindex method of the tab has to be called from the client side java script. The following sample code shows how to accomplish this
<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TabPanelClientside.aspx.vb" Inherits="TabPanelClientside" %>
<%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %>
<%@ 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 runat="server">
<title>Tab client side focus</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
<ajaxToolKit:TabContainer ID="Tab1" runat="server" ActiveTabIndex="0">
<ajaxToolKit:TabPanel runat="server" ID="tabOne" HeaderText="One" >
<ContentTemplate>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="RequiredFieldValidator" SetFocusOnError="True"></asp:RequiredFieldValidator>
</ContentTemplate>
</ajaxToolKit:TabPanel>
<ajaxToolKit:TabPanel runat="server" ID="tabTwo" HeaderText="Two">
<ContentTemplate>
<asp:Button ID="Button1" runat="server" Text="Button" OnClientClick="showTab(0)"/>
</ContentTemplate>
</ajaxToolKit:TabPanel>
</ajaxToolKit:TabContainer>
<script language="javascript">
function showTab(index ){
Page_ClientValidate()
if(Page_IsValid==false)
{
var tab = $get('<%=Tab1.ClientID%>').control;
tab.set_activeTabIndex(index);
}
}
</script>
</div>
</form>
</body>
</html>
Cheers J