TabContainer Setting Focus to a control inside the TabPanel

I have never used Ajax, but logicially, the solution that I can think of is that it might not be possible to find a control in a container. Try first finding the container based on the id of the same and when the container is found, write another loop that will loop through all the controls in the container. This should definitely help you in finding the textbox and setting focus to the same.

-- Ashpam

Hi sanddyc200,

did you solve the problem? It seems, as if I posted the same thing:

http://forums.asp.net/1688162/ShowThread.aspx#1688162

Kind regards,

Sven

Try out this: find the Tab Container control - document.getElementById('tabContainerId') - , then in the inmediate window of the VS.NET debugger, display the properties of your Tab Container, find the InnerHTML property, and look for the name that you gave to your control in the design mode; for example, if the control's name is textbox1, now the name of your control is probably 'tabContainerId_ctl101_textbox1', and that's the id that you have to look with your javascript.

Try out this: find the Tab Container control - document.getElementById('tabContainerId') - , then in the inmediate window of the VS.NET debugger, display the properties of your Tab Container, find the InnerHTML property and look for the new name of your control; for example, if the control's name in design mode is textbox1, now the name of your control is probably 'tabContainerId_ctl101_textbox1', and that's the id that you have to look with your javascript to set the focus.

I tried the document.getElementById but no luck...

It seems to me that the OnClientPopulated is not doing anything at all. I have the following line of code and nothing happened after the page is finished loading...

<

ajaxToolkit:TabPanelrunat="Server"ID="pnlContact"HeaderText="Contact"OnClientPopulated="function(){alert('hello');}">

But when I have the following line of code, then the message popped right up.

<ajaxToolkit:TabPanelrunat="Server"ID="pnlContact"HeaderText="Contact"OnClientClicked="function(){alert('hello');}">

Any clues? Anyone? Thanks!

I ran into the same problem when I was trying to set focus with an Asp.net validator.

What seems to happen is the control does get the focus but the tab panel remains hidden.

I found a way around this with the following code to manually display a tab. It basically calls the same js that is called when you click a tab.

var tabContainer = window.Sys.Application.findComponent('<%=tabContainer.ClientID %>');

tabContainer .set_activeTabIndex(1);

I hope this helps

Regards

Ian

It took me a while, but at the end I found a way to set a focus on a control inside a TabPanel when the Tab is activated by a client click on the tab.

But I have no idea how to set the focus on the control when the page is first loaded. I use server side code to set the focus, but it doesn't work.

The scenario is: TabContainer on an Usercontrol; UserControl on a web page; the web page has a master page. And I want to set the focus on a text box in the TabContainer, which is on the first Tab when the page is first loaded.

I appreciate any help. Thank you!

And below is my solution for setting the focus on a control on a tab when the tab is activated by a client click on the tab.

1<%@. Control Language="VB" AutoEventWireup="false" CodeFile="SearchTabs.ascx.vb"Inherits="UserControls_SearchTabs" %>2<%@. RegisterAssembly="AjaxControlToolkit"Namespace="AjaxControlToolkit" TagPrefix="ajaxToolkit" %>34<%@. RegisterAssembly="System.Web.Extensions, Version=1.0.61025.0, Culture=neutral, PublicKeyToken=31bf3856ad364e35"5Namespace="System.Web.UI" TagPrefix="asp" %>6<div style="text-align:left">78<script type="text/javascript" language="javascript" >910var control;111213function getControl_TabClicked1(sender, e) {14 control = $get('<%=txtName.ClientID%>');15}1617function getControl_TabClicked2(sender, e) {18 control = $get('<%=txtAddress.ClientID%>');19}2021function getControl_TabClicked3(sender, e) {22 control = $get('<%=txtID.ClientID%>');23}2425function getControl_TabClicked4(sender, e) {26 control = $get('<%=txtAttribute.ClientID%>');27}282930function setFocus(sender, e) {31 control.focus();32}333440 </script>414243<ajaxToolkit:TabContainer runat="server" ID="Tabs" CssClass="MyTab" Height="60px" Width="400px" OnClientActiveTabChanged="setFocus" >44 <ajaxToolkit:TabPanel runat="Server" ID="panName" HeaderText="By Name" ScrollBars="auto" OnClientClick="getControl_TabClicked1">45 <ContentTemplate>46 <asp:UpdatePanel ID="updateTab1" runat="server" >47 <ContentTemplate>48 <table >49 <tr>50 <td align="left">Enter Business Name</td>51 <td align="left"><asp:TextBox ID="txtName" runat="server" Width="150px" CssClass="textbox" TabIndex="1" /></td>52 <td align="center">53 <asp:Button ID="btnName" runat="Server" Text="Search" CssClass="textbox"/>54 </td>55 </tr>56 <tr>57 <td colspan="3" align="left">Enter at least 3 characters from the Business Name</td>58 </tr>59 </table>60 </ContentTemplate>61 </asp:UpdatePanel>62 </ContentTemplate>63 </ajaxToolkit:TabPanel>6465 <ajaxToolkit:TabPanel runat="Server" ID="panAddress" HeaderText="By Address" OnClientClick="getControl_TabClicked2">66 <ContentTemplate>67 <asp:UpdatePanel ID="updateTab2" runat="server">68 <ContentTemplate>69 <table>70 <tr>71 <td align="left">Enter Business Address</td>72 <td align="left"><asp:TextBox ID="txtAddress" runat="server" CssClass="textbox"/></td>73 <td align="center">74 <asp:Button ID="btnAddress" runat="Server" Text="Search" CssClass="textbox"/>75 </td>76 </tr>77 </table>78 </ContentTemplate>79 </asp:UpdatePanel>80 </ContentTemplate>81 </ajaxToolkit:TabPanel>8283 <ajaxToolkit:TabPanel runat="Server" ID="panID" HeaderText="By ID" OnClientClick="getControl_TabClicked3">84 <ContentTemplate>85 <asp:UpdatePanel ID="updateTab3" runat="server">86 <ContentTemplate>87 <table>88 <tr>89 <td align="left">Enter Business ID</td>90 <td align="left"><asp:TextBox ID="txtID" runat="server" CssClass="textbox"/></td>91 <td align="center">92 <asp:Button ID="btnID" runat="Server" Text="Search" CssClass="textbox"/>93 </td>94 </tr>95 <tr>96 <td colspan="3">97 <asp:RegularExpressionValidator runat="server" ID="revID" ControlToValidate="txtID" ValidationExpression="^\d+$" ErrorMessage="Must be an integer > 0!" Font-Size="X-Small" SetFocusOnError="true"></asp:RegularExpressionValidator>98 <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>99 </td>100 </tr>101 </table>102 </ContentTemplate>103 </asp:UpdatePanel>104 </ContentTemplate>105 </ajaxToolkit:TabPanel>106107 <ajaxToolkit:TabPanel runat="Server" ID="panAttribute" HeaderText="By Attribute" OnClientClick="getControl_TabClicked4">108 <ContentTemplate>109 <asp:UpdatePanel ID="updateTab4" runat="server">110 <ContentTemplate>111 <table>112 <tr>113 <td align="left">Select Attribute</td>114 <td align="left" colspan="2">115 <asp:DropDownList ID="ddlAttributes" DataSourceID="AttributesDataSource" DataTextField="text" DataValueField="value" runat="server" CssClass="textbox">116 </asp:DropDownList>117 <asp:XmlDataSource ID="AttributesDataSource" runat="server" DataFile="~/XML Files/AttributeNames.xml">118 </asp:XmlDataSource>119 </td>120 </tr>121 <tr>122 <td align="left">123 Enter Value124 </td>125 <td align="left">126 <asp:TextBox ID="txtAttribute" runat="server" CssClass="textbox"></asp:TextBox>127128 </td>129 <td align="center">130 <asp:Button ID="btnAttribute" runat="Server" Text="Search" CssClass="textbox"/>131 </td>132 </tr>133 </table>134 </ContentTemplate>135 </asp:UpdatePanel>136 </ContentTemplate>137 </ajaxToolkit:TabPanel>138</ajaxToolkit:TabContainer>139140</div>141142

I have been tearing my hair out trying to get this done and finally figured it out!

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>

Have a great day!

~Secretxelf

That was it!

Thanks a lot!

This solution worked perfect until i installed new release of ajax toolkit... 10920

When you click any tab, it set focus correctly, but when you first load the page it does.not

Do you know why?

Thank you for the help

Is working know... needed a reboot

thanks anyway

Thanks!! That worked perfect for me as well! I wanted to mark your response as the answer but I am guessing only the poster of the orginal question can do that?