ASP.Net RadioButton TabIndex not working with GroupName

Last Reply 3 months ago By dharmendr

Posted 3 months ago

I have 2 radio button with same group name, i used tabindex in both. Whenever i am using tab to focus on fields in my form for radio button it is focusing on checked radio button only not on unchecked radio button. I used div and put tabindex also but it is not focusing on radio button it is focusing on div i mean highlighting border of div on focus. 

below i am attaching code of my radiobuttons:

<td style="font-family:Arial, Helvetica, sans-serif" class="auto-style25" colspan="3">
    <asp:RadioButton ID="rdlaborhourly" runat="server" Text="Hourly" GroupName="labor" Checked="true"
        OnCheckedChanged="rdlaborhourly_CheckedChanged" AutoPostBack="true" TabIndex="14" />
    <asp:RadioButton ID="rdlaborsalary" runat="server" Text="Salary" GroupName="labor"
        OnCheckedChanged="rdlaborsalary_CheckedChanged" AutoPostBack="true" TabIndex="15"/>
</td>

i want to focus on radio button. plz help me out as soon as possible.

Posted 3 months ago Modified on 3 months ago

Hi JennyD6856,

What you are seeing is normal. You can't tab between RadioButtons in the same group. As you tab, you will only focus on the currently selected one then move to the next control on the form (Ex: TextBox).

The work around would be remove GroupName property from RadioButton, which means you have multiple groups each with one RadioButton. But then you lose the built in functionality that automatically deselects one RadioButton when you select the other.

Your user will be able to select both RadioButtons, so you need to add some logic that disables the other on CheckedChanged events.

I have implemented the same with an example to solve your issue.

Place the RadioButton inside a Panel and loop through the RadioButtons and deselect the other ones.

Check this example. Now please take its reference and correct your code.

HTML

<asp:Panel runat="server" ID="pnlGroupRadioButton">
    <asp:RadioButton ID="rdlaborhourly" runat="server" Text="Hourly" Checked="true" OnCheckedChanged="rdlaborhourly_CheckedChanged"
        AutoPostBack="true" TabIndex="1" />
    <asp:RadioButton ID="rdlaborsalary" runat="server" Text="Salary" OnCheckedChanged="rdlaborsalary_CheckedChanged"
        AutoPostBack="true" TabIndex="2" />
    <asp:RadioButton ID="rdlabordaily" runat="server" Text="Daily" OnCheckedChanged="rdlabordaily_CheckedChanged"
        AutoPostBack="true" TabIndex="3" />
</asp:Panel>

Code

C#

protected void rdlaborhourly_CheckedChanged(object sender, EventArgs e)
{
    SelectSingleRadio(sender as RadioButton);
}

protected void rdlaborsalary_CheckedChanged(object sender, EventArgs e)
{
    SelectSingleRadio(sender as RadioButton);
}

protected void rdlabordaily_CheckedChanged(object sender, EventArgs e)
{
    SelectSingleRadio(sender as RadioButton);
}

private void SelectSingleRadio(RadioButton radio)
{
    foreach (RadioButton rb in pnlGroupRadioButton.Controls.OfType<RadioButton>())
    {
        if (rb.ID != radio.ID)
        {
            rb.Checked = false;
        }
    }
}

VB.Net

Protected Sub rdlaborhourly_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
    SelectSingleRadio(TryCast(sender, RadioButton))
End Sub

Protected Sub rdlaborsalary_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
    SelectSingleRadio(TryCast(sender, RadioButton))
End Sub

Protected Sub rdlabordaily_CheckedChanged(ByVal sender As Object, ByVal e As EventArgs)
    SelectSingleRadio(TryCast(sender, RadioButton))
End Sub

Private Sub SelectSingleRadio(ByVal radio As RadioButton)
    For Each rb As RadioButton In pnlGroupRadioButton.Controls.OfType(Of RadioButton)()
        If rb.ID <> radio.ID Then
            rb.Checked = False
        End If
    Next
End Sub

Screenshot