asp.net radio button grouping

Question

I am currently having an issue with radio buttons and grouping. I have an asp radio button within a repeater control. I have the group name attribute set to "Customer". When the page loads, the radio buttons are not grouped. Instead of the id fields being set to the group name, it is setting the value fields of the radio buttons. I know that I have tried setting radio buttons up outside of a repeater control and have had the same issue. What is going on here?

aspx

<asp:Repeater ID="repCustomers" runat="server">
    <HeaderTemplate>
        <table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
            <tr>
                <th>&nbsp;</th>
                <th>Cust. No.</th>
                <th>Cust. Name</th>
            </tr>
    </HeaderTemplate>
    <ItemTemplate>
            <tr>
                <td>
                    <asp:RadioButton ID="radCustomer" GroupName="Customer" runat="server" ValidationGroup="Customer" ToolTip='<%#Eval("CustomerNumber") %>' />
                </td>
                <td><%#Eval("CustomerNumber")%></td>
                <td><%#Eval("Name") %></td>
            </tr>
    </ItemTemplate>
    <FooterTemplate>
        </table>
    </FooterTemplate>
</asp:Repeater>

output html

<table class="tableDefault" cellpadding="0" cellspacing="0" border="0" style="width: 383px; border: 0px !important">
    <tr>
        <th>&nbsp;</th>
        <th>Cust. No.</th>
        <th>Cust. Name</th>
    </tr>

    <tr>
        <td>
            <span title="111111"><input id="ctl00_PrimaryContent_repCustomers_ctl01_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl01$Customer" value="radCustomer" /></span>
        </td>
        <td>111111</td>
        <td>Jeremy's Test</td>
    </tr>

    <tr>
        <td>
            <span title="222222"><input id="ctl00_PrimaryContent_repCustomers_ctl02_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl02$Customer" value="radCustomer" /></span>
        </td>
        <td>222222</td>
        <td>My Test</td>
    </tr>

    <tr>
        <td>
            <span title="333333"><input id="ctl00_PrimaryContent_repCustomers_ctl03_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl03$Customer" value="radCustomer" /></span>
        </td>
        <td>333333</td>
        <td>Jim Bob's BBQ</td>
    </tr>

    <tr>
        <td>
            <span title="444444"><input id="ctl00_PrimaryContent_repCustomers_ctl04_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl04$Customer" value="radCustomer" /></span>
        </td>
        <td>444444</td>
        <td>New Hope Hamburgers</td>
    </tr>

    <tr>
        <td>
            <span title="555555"><input id="ctl00_PrimaryContent_repCustomers_ctl05_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl05$Customer" value="radCustomer" /></span>
        </td>
        <td>555555</td>
        <td>Pied Piper Pizza</td>
    </tr>

    <tr>
        <td>
            <span title="666666"><input id="ctl00_PrimaryContent_repCustomers_ctl06_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl06$Customer" value="radCustomer" /></span>
        </td>
        <td>666666</td>
        <td>Sandy's Subs</td>
    </tr>

    <tr>
        <td>
            <span title="777777"><input id="ctl00_PrimaryContent_repCustomers_ctl07_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl07$Customer" value="radCustomer" /></span>
        </td>
        <td>777777</td>
        <td>Leonard's Lambchops</td>
    </tr>

    <tr>
        <td>
            <span title="888888"><input id="ctl00_PrimaryContent_repCustomers_ctl08_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl08$Customer" value="radCustomer" /></span>
        </td>
        <td>888888</td>
        <td>Dave's Diamond Deli</td>
    </tr>

    <tr>
        <td>
            <span title="999999"><input id="ctl00_PrimaryContent_repCustomers_ctl09_radCustomer" type="radio" name="ctl00$PrimaryContent$repCustomers$ctl09$Customer" value="radCustomer" /></span>
        </td>
        <td>999999</td>
        <td>Ernie's Eatery</td>
    </tr>

</table>

The RadioButtons will be grouped if their 'name', not 'ID', fields are identical. — Ian Kemp, Aug 26 '09 at 14:35
Despite your comment about this happening outside of a repeater, I think this particular issue is linked pretty closely with your use of the repeater, as noted by CAbbott. You may want to consider editing your question title to reflect this, if you discover that this is actually the case. — Beska, Aug 26 '09 at 15:21

score 48 · Accepted Answer · edited Oct 09 '12 at 20:38

48

I finally got around this by creating a plain radio button and setting the value using an server-side eval.

<input type="radio" name="radCustomer" value='<%#Eval("CustomerNumber") %>' />

Now when the application performs a postback, I check for the value of Request.Form["radCustomer"]. This works flawlessly.

edited Oct 09 '12 at 20:38

JohnB

18,046
16
98
110

answered Jan 26 '10 at 17:43

fizch

2,599
3
30
45

1

If we need the AutoPostback functionality? – Sam Nov 11 '14 at 17:12
I couldnt do this because I needed and cant target the radio without making it a server side control – Sameer Alibhai Sep 06 '16 at 19:23
Not exactly flawlessly - when the form does not pass some sort of validation then after the postback the radio buttons are not selected - in other words: the choice is not saved between the postbacks. – Mariusz Ignatowicz Feb 09 '18 at 17:22

score 19 · Answer 2 · edited May 24 '17 at 03:21

19

Unfortunately, this is a well known issue with radio buttons within a repeater. One of your only options would be to create a custom server control derived from the RadioButton class and override how it renders.

EDIT: Here's a sample of what the derived class may look like:

public class MyRadioButton : RadioButton
{
    protected override void Render(HtmlTextWriter writer)
    {
        writer.Write("<input id=\"" + base.ClientID + "\" ");
        writer.Write("type=\"radio\" ");
        writer.Write("name=\"" + base.ID + "\" ");
        writer.Write("value=\"" + base.ID + "\" />");
        writer.Write("<label for=\"" + base.ClientID + "\">");
        writer.Write(base.Text);
        writer.Write("</label>");
    }
}

edited May 24 '17 at 03:21

goodeye

2,389
6
35
68

answered Aug 26 '09 at 15:12

CAbbott

8,078
4
31
38

11

Wow. This is a pretty big hole in functionality. Bleh. – Beska Aug 26 '09 at 15:17
2

This is based on the idea that you could have a radiobutton group within an item template of the repeater (multiple radio buttons on the same row). In that case you would want unique grouping based on the mangled id, but most of the time people want what the OP tried to do. – CAbbott Aug 26 '09 at 15:32
2

The `` tag is self closing and should not have an end tag and text inside it. The text with it should be in a `` tag instead. Final output should be done like the following: `writer.Write("" + base.Text + "");` – Chris Barr Mar 08 '12 at 16:24
Hi, why is the value attribute set to base.ID? – Matthew Lock May 24 '13 at 01:10

score 11 · Answer 3 · edited Jan 21 '20 at 15:34

11

I fixed it in javascript:

$(function () {
  $("#divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
});

edited Jan 21 '20 at 15:34

DreamTeK

32,537
27
112
171

answered Jan 04 '12 at 07:24

r3dsky

119
1
2

1

Which this "works" there's a lot of potential for confusion here. If you're really going with this method be sure you HEAVILY document what is going on. – Chris Barr Mar 08 '12 at 16:32

score 4 · Answer 4 · answered Jun 03 '12 at 05:58

I had the same issues. I am using Literal as placeholder to render radio button onItemCreated event.

ASP.Net

<asp:Repeater ID="rpt" runat="server" OnItemCreated="rpt_OnItemCreated">
    <ItemTemplate>
        <asp:Literal ID="lit" runat="server"></asp:Literal>
    </ItemTemplate>
</asp:Repeater>

C#

protected void rpt_OnItemCreated(object sender, RepeaterItemEventArgs e) {
    Literal lit = (Literal)e.Item.FindControl("lit");
    lit.Text = "<input type=\"radio\" name=\"myGroup\">";
}

Note that you must specify the name attribute (and not solely the id) for the radio-buttons to show up in Request.Form on postback! — Captain Sensible, Oct 12 '12 at 07:59

score 2 · Answer 5 · answered Sep 23 '15 at 19:57

2

I had to modify slightly the answer posted above by r3dsky.

Here's what worked for me:

$(document).ready(function () {
        $(".divWithGridViewOrRepeater input:radio").attr("name", "yourGroupName");
    });

answered Sep 23 '15 at 19:57

Jacob

21
2

score 0 · Answer 6 · answered Aug 26 '09 at 14:15

0

I would start by adding a value on my radiobutton Value='<%#Eval("CustomerNumber") %>'.

answered Aug 26 '09 at 14:15

Philippe Asselin

363
2
6

There is not a value attribute for the asp radio button control. – fizch Aug 26 '09 at 14:19
He probably meant the 'Text' property. ;) – Ian Kemp Aug 26 '09 at 14:33
That's a no go. I knew that it was just going to add a label to it, but I figured that I would try it anyways. – fizch Aug 26 '09 at 14:39

Matthew Lock · Answer 7 · 2013-05-08T01:00:23.190

0

I made my radiobutton have autopostback set to true, and then in the event handler set all the other radio buttons to BE unselected.

Not ideal, but I need lots control over the visibility and enabled attributes of the radiobutton, and it seemed easier to let ASP.NET control that rather than resorting to client side script.

edited May 08 '13 at 01:00

answered May 08 '13 at 00:48

Matthew Lock

13,144
12
92
130

score 0 · Answer 8 · edited May 23 '17 at 12:32

0

This is a well known bug with the ASP.NET Repeater using RadioButtons: here best solution in my opinion

edited May 23 '17 at 12:32

Community

1
1

answered Apr 05 '15 at 08:12

hmfarimani

531
1
8
13

score 0 · Answer 9 · answered Jan 29 '16 at 04:50

I did this:

$("input:radio").attr("name", $("input:radio").first().attr("name"));

Why? because if you replace the name property for any string you want, you will get an 'not found error'. So, you need to get the name of the first radiobutton, and rename all of them with that name. It works like a sharm ;)

score 0 · Answer 10 · answered Apr 19 '17 at 00:02

My solution, similar to others:

<input id="ctlRadio" runat="server" type="radio" data-fixgroupbug="1" >

// Fixes this ASP.NET bug: if radio input is inside repeater you can't set its name.
// Every input gets set different name by ASP.NET.
// They don't behave as a group. You can select multiple radios.
function fixRadiogroupBug()
{
    $('[type="radio"][data-fixgroupbug]').click(function () {
        $(this).siblings('[type="radio"]').prop('checked', false);
    });
}

$(document).ready(function () {
    fixRadiogroupBug();
});

asp.net radio button grouping

10 Answers10

Linked