Click here to Skip to main content
13,556,345 members
Click here to Skip to main content
Add your own
alternative version


15 bookmarked
Posted 9 Mar 2007

Using a TabIndex with a UserControl containing .NET controls

, 11 Mar 2007
Rate this:
Please Sign up or sign in to vote.
An article to demonstrate how to create a TabIndex for a user control in ASP .NET and the controls contained within the user control.

Usercontrol TabIndex


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 Country control.

private short _tabIndex;
public short TabIndex
        return _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 short.


  • 07 March 2007 - Version 1.0.


This article has no explicit license attached to it but may contain usage terms in the article text or the download files themselves. If in doubt please contact the author via the discussion board below.

A list of licenses authors might use can be found here


About the Author

Software Developer
United Kingdom United Kingdom
No Biography provided

You may also be interested in...


Comments and Discussions

General.How to find Path of a given file in C# Pin
Member #37839969-Mar-07 18:40
memberMember #37839969-Mar-07 18:40 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

Permalink | Advertise | Privacy | Terms of Use | Mobile
Web04-2016 | 2.8.180515.1 | Last Updated 11 Mar 2007
Article Copyright 2007 by openshac
Everything else Copyright © CodeProject, 1999-2018
Layout: fixed | fluid