March 02, 2012

TabContainer Setting Focus to a control inside the TabPanel

<%@ Control Language="VB" AutoEventWireup="false" CodeFile="SearchTabs.ascx.vb" Inherits="UserControls_SearchTabs" %><%@ Register Assembly="AjaxControlToolkit" Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %><%@ Register Assembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"
Namespace="System.Web.UI" TagPrefix="asp" %><div style="text-align:left">
<script type="text/javascript" language="javascript" >
var control;
function getControl_TabClicked1(sender, e) {
control
= $get('<%=txtName.ClientID%>'); }

function getControl_TabClicked2(sender, e) {
control
= $get('<%=txtAddress.ClientID%>'); }

function getControl_TabClicked3(sender, e) {
control
= $get('<%=txtID.ClientID%>'); }

function getControl_TabClicked4(sender, e) {
control
= $get('<%=txtAttribute.ClientID%>'); }

function setFocus(sender, e) {
control
.focus(); }

 
</script>

<ajaxToolkit:TabContainer runat="server" ID="Tabs" CssClass="MyTab" Height="60px" Width="400px" OnClientActiveTabChanged="setFocus" >
<ajaxToolkit:TabPanel runat="Server" ID="panName" HeaderText="By Name" ScrollBars="auto" OnClientClick="getControl_TabClicked1">

<ContentTemplate>

<asp:UpdatePanel ID="updateTab1" runat="server" >

<ContentTemplate>
<table >

<tr>
<td align="left">Enter Business Name</td>
<td align="left"><asp:TextBox ID="txtName" runat="server" Width="150px" CssClass="textbox" TabIndex="1" /></td>
<td align="center">
<asp:Button ID="btnName" runat="Server" Text="Search" CssClass="textbox"/>
</td>
</tr>
<tr>

<td colspan="3" align="left">Enter at least 3 characters from the Business Name</td>
</tr>
</table>
</ContentTemplate>

</asp:UpdatePanel>
</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="panAddress" HeaderText="By Address" OnClientClick="getControl_TabClicked2">
<ContentTemplate>
<asp:UpdatePanel ID="updateTab2" runat="server">
<ContentTemplate>
<table>
<tr>
<td align="left">Enter Business Address</td>
<td align="left"><asp:TextBox ID="txtAddress" runat="server" CssClass="textbox"/></td>
<td align="center">
<asp:Button ID="btnAddress" runat="Server" Text="Search" CssClass="textbox"/>
</td>
</tr>
</table>

</ContentTemplate>

</asp:UpdatePanel>
</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="panID" HeaderText="By ID" OnClientClick="getControl_TabClicked3">
<ContentTemplate>
<asp:UpdatePanel ID="updateTab3" runat="server">
<ContentTemplate>
<table>

<tr>
<td align="left">Enter Business ID</td>
<td align="left"><asp:TextBox ID="txtID" runat="server" CssClass="textbox"/></td>
<td align="center">
<asp:Button ID="btnID" runat="Server" Text="Search" CssClass="textbox"/>
</td>
</tr>
<tr>
<td colspan="3">

<asp:RegularExpressionValidator runat="server" ID="revID" ControlToValidate="txtID" ValidationExpression="^\d+$" ErrorMessage="Must be an integer > 0!" Font-Size="X-Small" SetFocusOnError="true"></asp:RegularExpressionValidator>
<asp:CompareValidator ID="cvID" runat="server" ControlToValidate="txtID" ValueToCompare="0" Operator="NotEqual" ErrorMessage="Must be an integer > 0!" Font-Size="X-Small" SetFocusOnError="true"></asp:CompareValidator>

</td>

</tr>

</table>

</ContentTemplate>

</asp:UpdatePanel>
</ContentTemplate>

</ajaxToolkit:TabPanel>

<ajaxToolkit:TabPanel runat="Server" ID="panAttribute" HeaderText="By Attribute" OnClientClick="getControl_TabClicked4">
<ContentTemplate>
<asp:UpdatePanel ID="updateTab4" runat="server">
<ContentTemplate>
<table>

<tr>
<td align="left">Select Attribute</td>
<td align="left" colspan="2">
<asp:DropDownList ID="ddlAttributes" DataSourceID="AttributesDataSource" DataTextField="text" DataValueField="value" runat="server" CssClass="textbox">
</asp:DropDownList>
<asp:XmlDataSource ID="AttributesDataSource" runat="server" DataFile="~/XML Files/AttributeNames.xml">
</asp:XmlDataSource>
</td>

</tr>
<tr>
<td align="left">
Enter Value
</td>
<td align="left">
<asp:TextBox ID="txtAttribute" runat="server" CssClass="textbox"></asp:TextBox>

</td>

<td align="center">
<asp:Button ID="btnAttribute" runat="Server" Text="Search" CssClass="textbox"/>
</td>
</tr>
</table>

</ContentTemplate>

</asp:UpdatePanel>
</ContentTemplate>

</ajaxToolkit:TabPanel> </ajaxToolkit:TabContainer>


</div>  


Place this at the BOTTOM of your ASP.Net Page. Replace txtPartNo with the name of your control.

<script language="javascript" type="text/javascript">
Sys.Application.add_load
(

function()
{
window
.setTimeout(focus, 1);
}
)
function focus()
{
document
.getElementById('<%=txtPartNo.ClientID %>').focus();
}

</script>  

No comments:

Post a Comment