Click here to Skip to main content
11,802,334 members (36,503 online)
Click here to Skip to main content

Tagged as

Grouped Radio Buttons in Gridview

, 28 Sep 2010 CPOL 67.5K 1.8K 15
Rate this:
Please Sign up or sign in to vote.
Radio buttons in Gridview without JavaScript


This is my first article published on The Code Project web site. In this article, I will show you how you can use grouped RadioButtons inside a GridView control.

Main Problem About Radio Buttons in Gridview

The big problem is that we can’t put all the radio buttons into one group in the gridview, although we have set the same group name for them.

The RadioButton's GroupName property is what is used to group a series of radio buttons. All RadioButton controls with the same GroupName value are considered grouped; only one radio button can be selected from a group at a time. The GroupName property specifies the value for the rendered radio button's name attribute. The browser examines the radio buttons name attributes to determine the radio button groupings.

Every row in the gridview has a different ID. So the radiobutton’s GroupName is useless in the gridview.

<asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
                    DataKeyNames="EmployeeID" DataSourceID="SqlDataSource1" 
                    Font-Size="14px" Width="289px">
                        <asp:BoundField DataField="LastName" HeaderText="LastName" 
                            SortExpression="LastName" />
                        <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                            SortExpression="FirstName" />
                        <asp:TemplateField HeaderText="Useless Group">
                                    <asp:RadioButton ID="MyRadioButton" runat="server" 
                                        GroupName="UselessGroup"  />


If we view source from the browser and check the radio button markup, we will get the following code:


The result is that we can only select multiple radio buttons, when we want to make a single selection, which is like what we do with checkboxes.

This article will show you how to solve this problem without any JavaScript programming.

Using CheckedChanged event to simulate a group for Radio button in Gridview.

There is an event named checkedchanged in radiobutton control. When this event is triggered, we just deselect all radio buttons in gridview, and then re-select the required radio button. The radio button reselected is the one which triggered the checkedchanged event in the first instance.

<asp:TemplateField HeaderText="Fake group">
            <asp:RadioButton ID="MyRadioButton1" runat="server" 
                     GroupName="FakeGroup"  AutoPostBack="True" 
			OnCheckedChanged="MyRadioButton1_CheckedChanged" />
Protected Sub MyRadioButton1_CheckedChanged_
	(ByVal sender As Object, ByVal e As System.EventArgs)
        'deselect radiobutton1
        'RadioButton1.Checked = False
        'check the radiobutton which is checked
        Dim SenderRB As RadioButton = sender
        SenderRB.Checked = True
        'Reflect the event
    End Sub
Sub deselect_RB_in_gridview()
    Dim gvr As GridViewRow
    Dim i As Int32
    'deselect all radiobutton in gridview
    For Each gvr In GridView1.Rows
        Dim rb As RadioButton
        rb = CType(GridView1.Rows(i).FindControl("MyRadioButton1"), RadioButton)
        rb.Checked = False
        i += 1
End Sub

The function of deselect_RB_in_gridview() will clear all the radio button checked flag.

The two codes below will find the radio button which triggered the CheckedChanged event, and then re-select it.

Dim SenderRB As RadioButton = sender

SenderRB.checked = True

In my source code, I use Northwind database and give add an extra function to the radio gridview. I set a radio button outside the gridview. If you choose the radio button in the gridview, the web page will popup an always visible panel and show your selection in it. If you select the outside radio button, all the radio buttons in the gridview will be cleared and that always visible panel will disappear as well.


I hope you like it. Happy coding!


  • 28th September, 2010: Initial post


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Web Developer
New Zealand New Zealand
No Biography provided

You may also be interested in...

Comments and Discussions

QuestionVery good Article Pin
ratanram3-Nov-14 21:09
groupratanram3-Nov-14 21:09 
AnswerRe: Very good Article Pin
Tim_w8-Nov-14 10:42
memberTim_w8-Nov-14 10:42 
QuestionMessage Automatically Removed Pin
28-Oct-13 0:22
memberMember 1022174128-Oct-13 0:22 
QuestionExcellent Pin
katlegoEmmnanuelNkosi22-Oct-13 3:24
groupkatlegoEmmnanuelNkosi22-Oct-13 3:24 
GeneralExcellent! Pin
dedamu6-Jun-13 16:07
memberdedamu6-Jun-13 16:07 
GeneralRe: Excellent! Pin
Tim_w9-Jun-13 11:17
memberTim_w9-Jun-13 11:17 
GeneralAnother option Pin
Richard Deeming5-Oct-10 8:15
memberRichard Deeming5-Oct-10 8:15 
GeneralRe: Another option Pin
Tim_w5-Oct-10 10:42
memberTim_w5-Oct-10 10:42 
GeneralMy vote of 5 Pin
RahulKhadikar28-Sep-10 18:30
memberRahulKhadikar28-Sep-10 18:30 
Nice post
GeneralRe: My vote of 5 Pin
Tim_w29-Sep-10 16:47
memberTim_w29-Sep-10 16:47 
GeneralSource code readability Pin
NinethSense28-Sep-10 0:54
memberNinethSense28-Sep-10 0:54 
GeneralRe: Source code readability Pin
Tim_w28-Sep-10 1:37
memberTim_w28-Sep-10 1:37 
GeneralRe: Source code readability Pin
dishantmudgal26-Sep-12 17:33
memberdishantmudgal26-Sep-12 17:33 

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

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

| Advertise | Privacy | Terms of Use | Mobile
Web02 | 2.8.151002.1 | Last Updated 28 Sep 2010
Article Copyright 2010 by Tim_w
Everything else Copyright © CodeProject, 1999-2015
Layout: fixed | fluid