It's not uncommon to have a user control which acts as a simple container for a number of "sub controls". A typical example might be an
Address control containing an Address, City, and Country textbox. This "
Address" user control does not have a
TabIndex property by definition. However, the user might wish to tab smoothly through their page (including through the controls contained within the user control).
What we can do though is create a
TabIndex property for the user control and ensure that when it receives focus, the controls within it will tab through successfully.
Using the code
The first bit is to create a
TabIndex property for the user control. In fact, what we do is set the
TabIndex of the first control (the
Address control), then the
City control, and finally the
private short _tabIndex;
public short TabIndex
_tabIndex = value;
txtAddress.TabIndex = (short)(value++);
txtCity.TabIndex = (short)(value++);
txtCountry.TabIndex = (short)(value);
When writing your HTML, simply set the
TabIndex of each of control on your page. However, you need to allow for each of the controls within your user control. So in this example, the user control will use
TabIndexes 2, 3, and 4. Thus, you need to restart the
TabIndex at 5 for the next control on the page.
However, it may be worth allowing for additional controls (in case you choose to add, for example, a Postal Code textbox further down the line). So in this case, you could restart the
TabIndex at 12 (rather than 5), allowing for up to 10 controls in total.
<asp:TextBox ID="txtName" runat="server" TabIndex="1"></asp:TextBox>
<uc1:Address ID="ctlAddress" runat="server" TabIndex="2"/>
<asp:TextBox ID="txtComments" runat="server" TabIndex="5"></asp:TextBox>
Points of interest
Note that the property
TabIndex is a
short, so when we set the
TabIndex of the controls within the user control we must cast the value as a
- 07 March 2007 - Version 1.0.