Select Single Radio Button in Gridview in Asp.Net

In this article we will learn how to select only one row of a Gridview using RadioButtons whereas normally a RadioButton does not support selection of only one RadioButton within a row.

Introduction

In this article we will learn how to select only one row of a GridView using RadioButtons whereas normally a RadioButton does not support selection of only one RadioButton within a row.

Background

In ASP.Net the GridView control does not support selection of a single RadioButton that works as a group across rows. Generally as you know a RadioButton is a control that works in a group for selecting only one option. If we take RadioButtonList control it will work everywhere, which applies to a GridView also but if we use only one RadioButton control for each row in GridView it will not allow us to select only one. Try selecting a RadioButton in every row; it will allow selection of multiple rows in GridView. Here we will see how to restrict the user to select only one RadioButton within a GridView control.

For doing this task I've written some Javascript function. This function actually I got from somewhere while Google search. We will step by step follow.

Step 1

Start new website. Put the GridView control on the Default.aspx page with RadioButton control in TemplateField like bellow.

  1. <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False"   
  2.             DataKeyNames="AuthId">  
  3.             <Columns>  
  4.             <asp:TemplateField ShowHeader="false">  
  5.             <ItemTemplate>  
  6.             <asp:RadioButton ID="rdbauthid" runat="server" onclick="javascript:CheckOtherIsCheckedByGVID(this);" />  
  7.             </ItemTemplate>  
  8.             </asp:TemplateField>  
  9.             <asp:BoundField HeaderText="AUTHOR NAME" DataField="AuthName" />  
  10.             <asp:BoundField HeaderText="AUTHOR LOCATION" DataField="AuthLocation" />  
  11.             </Columns>  
  12. </asp:GridView>  
In the above you may see that in the Click event of the RadioButton control I call a Javascript function.

Step 2

Write the script as below for checking the current selection of the RadioButton control; if more than one is selected then the other selection is removed. Other than this there are two more methods to do same task.
  1. <script type="text/javascript">  
  2.             function CheckOtherIsCheckedByGVID(spanChk) {  
  3.                 var IsChecked = spanChk.checked;  
  4.                 if (IsChecked) {                   
                        spanChk.parentElement.parentElement.style.backgroundColor = 
    '#228b22';  
  5.                     spanChk.parentElement.parentElement.style.color = 'white';  
  6.                 }  
  7.                 var CurrentRdbID = spanChk.id;  
  8.                 var Chk = spanChk;  
  9.                 Parent = document.getElementById("<%=GridView1.ClientID%>");  
  10.                 var items = Parent.getElementsByTagName('input');  
  11.                 for (i = 0; i < items.length; i++) {  
  12.                     if (items[i].id != CurrentRdbID && items[i].type == "radio") {  
  13.                         if (items[i].checked) {  
  14.                             items[i].checked = false;
                                items[i].parentElement.parentElement.style.backgroundColor = 
    'white'   
  15.                             items[i].parentElement.parentElement.style.color = 'black';  
  16.                         }  
  17.                     }  
  18.                 }  
  19.             }  
  20. </script>  
Step 3

Bind your GridView in aspx.cs page and run the application.

Conclusion

In this way we can restrict the user to select only one option via RadioButton in GridView.