Handling RadioButtons on DataGrid

Hernan Molina

4.33/5 (8 votes)

May 6, 2005

77954

1013

This article resolves how to manage RadioButtons on the DataGrid.

Download source - 14.3 Kb

Introduction

When I had to develop a DataGrid that could handle an option for the user, I found the same problem perfectly described by Vladimir Smirnov in his article "How to Group RadioButtons". However, taking into account the nature of the project, I couldn't use an external DLL. So I decided to handle it by using JavaScript.

Background

The idea is to call a JavaScript script when the user clicks the RadioButton to know which RadioButton was clicked, and thus uncheck the rest of them. To call that JavaScript, we must find the control RadioButton in the ItemDataBound event handler of the DataGrid, add the "onclick" attribute and pass the ClientID of the RadioButton to the JavaScript.

Using the code

Adding JavaScript code in the HTML of the Web Form:

<script language=javascript>
  function RadioChecked(param)
  {
       { 
          var frm = document.forms[0];
          // Take all elements of the form
          for (i=0; i < frm.length; i++)
          {
            // itinerate the elements searching "RadioButtons"
            if (frm.elements[i].type == "radio")
            {
              // Unchecked if the RadioButton is != param
              if (param != frm.elements[i].id )
              {
                frm.elements[i].checked = false;
              }
            }
          }
      }
  }
</script>
<body MS_POSITIONING="GridLayout">
    <form id="Form1" method="post" runat="server">
        <asp:DataGrid id="countriesGrid" runat="server" 
                  DataKeyField="ID" AutoGenerateColumns="False">
            <Columns>
            <asp:TemplateColumn>
                <ItemTemplate>
                    <asp:RadioButton id="selectRadioButton" runat="server"  />
                <ItemTemplate>
            </asp:TemplateColumn>
            <asp:BoundColumn DataField="Code" 
                    HeaderText="Code" HeaderStyle-Font-Bold="True" />
            <asp:BoundColumn DataField="Country" 
                    HeaderText="Country" HeaderStyle-Font-Bold="True" />
            </Columns>
        </asp:DataGrid>
        <asp:Button id="Button1" runat="server" 
               Text="See Checked"></asp:Button>
    </form>
</body>

We should add the code shown below in the ItemDataBound event handler of the DataGrid:

    Private Sub countriesGrid_ItemDataBound(ByVal sender As Object, _
                ByVal e As System.Web.UI.WebControls.DataGridItemEventArgs) _
                Handles countriesGrid.ItemDataBound
        Select Case e.Item.ItemType
           // You can select the ItemType that you want
            Case ListItemType.AlternatingItem, _
                     ListItemType.Item, ListItemType.EditItem
                CType(e.Item.FindControl("selectRadioButton"), _
                    RadioButton).Attributes.Add("onclick", _
                    "javascript: RadioChecked('" + _
                    CType(e.Item.FindControl("selectRadioButton"), _
                    RadioButton).ClientID + "');")
        End Select
    End Sub

If you want to see which country was selected, you must iterate the Items collection of the DataGrid control:

    Private Sub Button1_Click(ByVal sender As System.Object, _
                ByVal e As System.EventArgs) Handles Button1.Click
        Dim item As DataGridItem
        For Each item In dgCountries.Items
            Response.Write("Country : " + item.Cells(2).Text + " " + _
               CType(item.FindControl("selectRadioButton"), _
               RadioButton).Checked.ToString + vbnewline)
        Next
    End Sub

Points of Interest

You can embed the JavaScript code in a .js file, so you can use it in future.

Tested on IE6, Netscape 7.0.