tabindex on multiple user controls

[dertyfern]

Have 2 instances of a usercontrol on one page but the tab index is off.

Example:

Form 1 -
name field
phone field
email field

Form 2 -
name field
phone field
email field

If I'm on Form 1, name field and hit tab, Form 2, name field comes into focus.

Each usercontrol has it's own unique ID:

Form 1:
<usc1:EventManagement ID="form2" runat="server" />

Form 2:
<usc1:EventManagement ID="form3" runat="server" />

How can I control the tabindex?

Thanks in advance.

[marcel]

Could you show us the code you are using? I can only reproduce the problem if I explicitly set the TabIndex Property of the controls in my UserControl, resulting in duplicate TabIndexes.

If I do not set this property, the Tab order is the same as the order in which the controls appear in the HTML.

[dertyfern]

Thanks for the post.

I actually just figured it out...stupid simple really, duhh. I just set the tabindex to run from 1 through 6 between all fields in both UserControls.

So:

Form 1 -
name field - tabindex 1
phone field - tabindex 2
email field - tabindex 3

Form 2 -
name field - tabindex 4
phone field - tabindex 5
email field - tabindex 6

Hope this help if anyone else run into this problem. It's my first time using two UserControls on a page!

[dertyfern]

Now the problem is that only one UserControl input form (TagPrefix="usc1" Src="WebUserControl.ascx") works in posting info:

ASPX CODE:
<%@ Register TagPrefix="usc1" Src="WebUserControl.ascx" TagName="EventManagement" %>

<%@ Register TagPrefix="usc2" Src="Payment.ascx" TagName="EventManagement2" %>


in body of ASPX:

<usc1:EventManagement ID="EventManagement" runat="server" />

<usc2:EventManagement2 ID="EventManagement2" runat="server" />


WebUserControl.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="WebUserControl.ascx.cs" Inherits="clients_becomeincredible_WebUserControl" %>
<link href="Styles.css" rel="stylesheet" type="text/css" />
<table background="images/reserve-your-seat.gif" style="width: 205px; height: 313px">
<tr>
<td style="height: 77px" colspan="2">
</td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">
Full name:<br />
<asp:TextBox ID="TextBox1" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="1"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator1" runat="server" ControlToValidate="TextBox1"
ErrorMessage="Name is required. ">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">
Phone number:<br />
<asp:TextBox ID="TextBox2" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="2"></asp:TextBox>
<asp:RequiredFieldValidator ID="RequiredFieldValidator3" runat="server" ControlToValidate="TextBox2"
ErrorMessage="Phone is required. ">*</asp:RequiredFieldValidator></td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">
Email:<br />
<asp:TextBox ID="TextBox3" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="3"></asp:TextBox>
<asp:RegularExpressionValidator ID="RegularExpressionValidator1" runat="server" ControlToValidate="TextBox3"
ErrorMessage="Please format email" ValidationExpression="\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*">*</asp:RegularExpressionValidator></td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button1" runat="server" OnClick="Button1_Click" TabIndex="4" Text="REGISTER NOW" CssClass="button_register" Height="30px" /></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>


Payment.ascx:

<%@ Control Language="C#" AutoEventWireup="true" CodeFile="Payment.ascx.cs" Inherits="PaymentControl" %>
<link href="Styles.css" rel="stylesheet" type="text/css" />
<table background="images/reserve-your-seat.gif" style="width: 205px; height: 313px">
<tr>
<td style="height: 77px" colspan="2">
</td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">Full name:<br />
<asp:TextBox ID="TextBox11" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="5"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">Phone number:<br />
<asp:TextBox ID="TextBox12" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="6"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" class="reserve-your-seat" colspan="2">Email:<br />
<asp:TextBox ID="TextBox13" onblur="this.style.backgroundColor='white'" onfocus="this.style.backgroundColor='#FEEBAD'" runat="server" TabIndex="7"></asp:TextBox>
</td>
</tr>
<tr>
<td align="center" colspan="2">
<asp:Button ID="Button11" runat="server" OnClick="Button11_Click" TabIndex="8" Text="REGISTER NOW" CssClass="button_register" Height="30px" /></td>
</tr>
<tr>
<td colspan="2">
</td>
</tr>
</table>

[dertyfern]

Figured this one out also: solution is using ValidationGroup. I set each UserControl to a different ValidationGroup and all works.