Grouped Radio Buttons in Gridview

• Download source - 1.36 MB

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>

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">
        <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.

I hope you like it. Happy coding!

History

• 28^th September, 2010: Initial post