ASP.NET C# GridView Tab Index issue

Question

It seems that when adding a row to an ASP.NET GridView, the Tab Index does not behave as expected (or desired). Instead of tabbing across each column in a row and then moving to the next row, the tab will move down each row in a column and then move to the next column and so on. Simply put, it will tab vertically instead of horizontally. This can be an issue for data entry applications where a user relies heavily on keyboard input.

Any solutions for this issue?

Answer 1

You could assign the TabIndex's for all your controls inside the grid manually on the rowdatabound event. Figure out how many controls you want to tab though on a specific row and then based on the row index just formulate the tab order.

Answer 2

I have been screwing with this for a while and have this solution! Hope it helps other people who have the same issue.

protected void theGridView_DataBound(object sender, EventArgs e)
{
    SetTabIndexes();
}


private void SetTabIndexes()
{
    short currentTabIndex = 0;
    inputFieldBeforeGridView.TabIndex = ++currentTabIndex;

    foreach (GridViewRow gvr in theGridView.Rows)
    {
        DropDownList dropDown1 = (DropDownList)gvr.FindControl("dropDown1");
        dropDown1.TabIndex = ++currentTabIndex;

        TextBox inputField1 = (TextBox)gvr.FindControl("inputField1");
        inputField1.TabIndex = ++currentTabIndex;

        TextBox inputField2 = (TextBox)gvr.FindControl("inputField2");
        inputField2.TabIndex = ++currentTabIndex; 

        TextBox inputField3 = (TextBox)gvr.FindControl("inputField3");
        inputField3.TabIndex = ++currentTabIndex;
    }

    someLinkAfterGridView.TabIndex = ++currentTabIndex;
}

Answer 3

Have a look at Automatically create TabIndex in a repeater

For each control you could set the TabIndex to a property in code behind.

<asp:GridView ID="gv" runat="server">
  <columns>
    <asp:TemplateField HeaderText="Action" ShowHeader="False" Visible="true"> 
      <ItemTemplate>
        <asp:CheckBox ID="cbGroup" Checked="true" runat="server" TabIndex='<%# TabIndex %>' Text='<%# Eval("Title") %>' />
      </ItemTemplate>
    </asp:TemplateField>
  </columns>
</asp:GridVeiw>

Then in code behind increment a TabIndex counter:

private int _tabIndex = 0;

public int TabIndex
{
  get
  {
    _tabIndex++;
    return _tabIndex;
  }
}