Click here to Skip to main content
Click here to Skip to main content

Grouped Radio Buttons in Gridview

By , 28 Sep 2010
Rate this:
Please Sign up or sign in to vote.

Introduction

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-Names="Verdana" 
                    Font-Size="14px" Width="289px">
                    <Columns>
                        <asp:BoundField DataField="LastName" HeaderText="LastName" 
                            SortExpression="LastName" />
                        <asp:BoundField DataField="FirstName" HeaderText="FirstName" 
                            SortExpression="FirstName" />
                        <asp:TemplateField HeaderText="Useless Group">
                            <ItemTemplate>
                                    <asp:RadioButton ID="MyRadioButton" runat="server" 
                                        GroupName="UselessGroup"  />
                            </ItemTemplate>
                        </asp:TemplateField>

multi-choose.png

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

view.png

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">
        <ItemTemplate>
            <asp:RadioButton ID="MyRadioButton1" runat="server" 
                     GroupName="FakeGroup"  AutoPostBack="True" 
			OnCheckedChanged="MyRadioButton1_CheckedChanged" />
        </ItemTemplate>
</asp:TemplateField>
Protected Sub MyRadioButton1_CheckedChanged_
	(ByVal sender As Object, ByVal e As System.EventArgs)
        deselect_RB_in_gridview()
        'deselect radiobutton1
        'RadioButton1.Checked = False
        'check the radiobutton which is checked
        Dim SenderRB As RadioButton = sender
        SenderRB.Checked = True
        '--------------------------------------
        'Reflect the event
        '---------------------------------------
        'fire_visible_window()
    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
        Next
    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.

visible.png

I hope you like it. Happy coding!

History

  • 28th September, 2010: Initial post

License

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

About the Author

Tim_w
Web Developer
New Zealand New Zealand
No Biography provided

Comments and Discussions

 
Questiongreate help! PinmemberMember 1022174128-Oct-13 0:22 
QuestionExcellent PingroupkatlegoEmmnanuelNkosi22-Oct-13 3:24 
GeneralExcellent! Pinmemberdedamu6-Jun-13 16:07 
GeneralRe: Excellent! PinmemberTim_w9-Jun-13 11:17 
GeneralAnother option PinmemberRichard Deeming5-Oct-10 8:15 
GeneralRe: Another option PinmemberTim_w5-Oct-10 10:42 
GeneralMy vote of 5 PinmemberRahulKhadikar28-Sep-10 18:30 
GeneralRe: My vote of 5 PinmemberTim_w29-Sep-10 16:47 
GeneralSource code readability PinmemberNinethSense28-Sep-10 0:54 
GeneralRe: Source code readability PinmemberTim_w28-Sep-10 1:37 
GeneralRe: Source code readability Pinmemberdishantmudgal26-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 | Mobile
Web04 | 2.8.140415.2 | Last Updated 28 Sep 2010
Article Copyright 2010 by Tim_w
Everything else Copyright © CodeProject, 1999-2014
Terms of Use
Layout: fixed | fluid