<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>
<%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="AJAXControls" %>
<!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>Untitled Page</title>
</head>
<body>
<form id="form1" runat="server">
<div>
<AJAXControls:TabContainer runat="server" ID="tabContainer">
<AJAXControls:TabPanel ID="firstTab" HeaderText="First Tab" runat="server">
<ContentTemplate>
<asp:Label ID="Label1" runat="server">You are in the First tab. <br /> Press the submit button to see the validation result.</asp:Label>
</ContentTemplate>
</AJAXControls:TabPanel>
<AJAXControls:TabPanel ID="secondTab" HeaderText="Second Tab" runat="server">
<ContentTemplate>
<label id="Label2" runat="server">Please select a value from the drop down: </label>
<!--ASP.NET Drop down control-->
<asp:DropDownList ID="status" runat="server" >
<asp:ListItem Selected="True" Text="Select" Value="0" />
<asp:ListItem Text="One" />
<asp:ListItem Text="Two" />
<asp:ListItem Text="Three" />
</asp:DropDownList>
<!--ASP.NET Required Field Validator to validate the drop down.-->
<asp:RequiredFieldValidator ID="statusValidator" runat="server" ErrorMessage="Please choose a value other than 'Select'" ControlToValidate="status" InitialValue="0" Visible="true" Display="None">
</asp:RequiredFieldValidator>
<AJAXControls:ValidatorCalloutExtender ID="statusValidator_ValidatorCalloutExtender"
runat="server" TargetControlID="statusValidator"> </AJAXControls:ValidatorCalloutExtender>
</ContentTemplate>
</AJAXControls:TabPanel>
</AJAXControls:TabContainer>
<br />
<asp:Button ID="submit" Text="Submit" OnClientClick="javascript:return ValidatePage();"
runat="server" />
<asp:ScriptManager ID="ScriptManager1" runat="server">
</asp:ScriptManager>
</div>
</form>
</body>
</html>
<script language="javascript" type="text/javascript">
function ValidatePage()
{
// Getting the validation control using the new $get function.
var valCntl = $get('<%=statusValidator.ClientID%>');
if (valCntl != undefined && valCntl != null)
{
/*ValidatorValidate function executes the validation logic associated with the validation control. */
ValidatorValidate(valCntl);
/*isvalid property is set to a boolean value by the ValidatorValidate based on whether the validation logic associated with the validation control was successful or not. */
if (!valCntl.isvalid)
{
/*User defined method to hide the validator callout control.
hideValidatorCallout(); */
/*Retrieving the tab container control using new $get javascript function. */
var tabContainer = $get('<%=tabContainer.ClientID%>');
if (tabContainer != undefined && tabContainer != null)
{
tabContainer = tabContainer.control;
tabContainer.set_activeTabIndex(1);
showValidatorCallout();
}
return false;
}
return true;
}
}
function hideValidatorCallout()
{
/*Below code hides the active AjaxControlToolkit ValidatorCalloutExtender control. */
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.hide();
}
function showValidatorCallout()
{
/*Gets the AjaxControlToolkit ValidatorCalloutExtender control using the $find method. */
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout = $find('<% =statusValidator_ValidatorCalloutExtender.ClientID %>');
//Below code unhides the AjaxControlToolkit ValidatorCalloutExtender control.
AjaxControlToolkit.ValidatorCalloutBehavior._currentCallout.show(true);
}
</script>
tabContainer = tabContainer.control;
tabContainer.set_activeTabIndex(1);
Once you retrieve the tab container object using the “control” property one can use “set_activeTabIndex” to set the focus to the required tab. The “set_activeTabIndex” method takes an integer (tab index) value as the argument. Using the “set_activeTabIndex” javascript method one can set focus to the required tab.
tabContainer = tabContainer.control;
//Retrieving the tab using the get_activeTab method/property
var tab = tabContainer.get_activeTab();
var headerText = tab.get_headerText();
alert(headerText);
//Another way of retrieving the tab using the get_previousTab method/property
tab = tabContainer.getPreviousTab();
alert(tab.get_tabIndex());
Have a question about something in this article? You can receive help directly from the article author. Sign up for a free trial to get started.
Comments (0)