ASP.NET

Select Single Radio Button in Gridview in Asp.Net

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.

Up Next
    Ebook Download
    View all
    Learn
    View all
    Membership not found