Steps

Declare a GridView control with a TemplateColumn as the first column to include Radio control. Include BoundField for other fields to display in the GridView.

<asp:GridView ID="gvUsers" runat="server" AutoGenerateColumns="False" BackColor="White" BorderColor="#010101" BorderStyle="Groove" BorderWidth="1px" CellPadding="4" OnRowCommand="gvUsers_RowCommand">

         <Columns>

            <asp:TemplateField HeaderText="Select">

                  <ItemTemplate>

                     <asp:RadioButton ID="rdbGVRow" onclick="javascript:CheckOtherIsCheckedByGVID(this);"  runat="server" />

                  </ItemTemplate>

            </asp:TemplateField>

            <asp:BoundField DataField="Email" HeaderText="Email" ReadOnly="True" />

            <asp:BoundField DataField="FirstName" HeaderText="First Name" ReadOnly="True" />

            <asp:BoundField DataField="LastName" HeaderText="Last Name" ReadOnly="True" />                        

      </Columns>

   <FooterStyle BackColor="White" ForeColor="#330099" />

   <RowStyle BackColor="White" ForeColor="#330099" />

                    <SelectedRowStyle BackColor="#FFCC66" Font-Bold="True" ForeColor="#663399" />

   <PagerStyle BackColor="#FFFFCC" ForeColor="#330099" HorizontalAlign="Center" />

  <HeaderStyle BackColor="#F06300" Font-Bold="True" ForeColor="#FFFFCC" />

</asp:GridView>

CodeBehind

protected void Page_Load(object sender, EventArgs e)

    {

        if (!IsPostBack)

            BindUsers();

    }

    public void BindUsers()

    {

        SqlConnection con = new SqlConnection(ConfigurationManager.ConnectionStrings["Sql"].ConnectionString);

        con.Open();

        SqlCommand com = new SqlCommand("SP_GetUsersForModeration", con);

        com.CommandType = CommandType.StoredProcedure;

        SqlDataAdapter ada = new SqlDataAdapter(com);

        DataTable dt = new DataTable();

        ada.Fill(dt);       

        gvUsers.DataSource = dt;

        gvUsers.DataBind();

    }

Execute the page. You can see the GridView with RadioButton.

Adding Client Side Functionality

To check if there is some other row selected and to uncheck it by keeping the current row selection we will call a JavaScript function called CheckOtherIsCheckedByGVID(). This function is called by the OnClick event of the RadioButton, Refer the above code.

The below JavaScript function will do our client side functionality.

function CheckOtherIsCheckedByGVID(spanChk)

       {            

           var IsChecked = spanChk.checked;        

           if(IsChecked)

              {

               spanChk.parentElement.parentElement.style.backgroundColor='#228b22'; 

               spanChk.parentElement.parentElement.style.color='white';

              }                   

           var CurrentRdbID = spanChk.id;   

           var Chk = spanChk;

              Parent = document.getElementById('gvUsers');          

              var items = Parent.getElementsByTagName('input');            

              for(i=0;i<items.length;i++)

              {               

                  if(items[i].id != CurrentRdbID && items[i].type=="radio")

                  {           

                      if(items[i].checked)

                      {    

                          items[i].checked = false;

items[i].parentElement.parentElement.style.backgroundColor='white';

items[i].parentElement.parentElement.style.color='black';                     }

                  }

              }

       }

Execute the page and see it in action.

Since, we are getting all the elements with tag name as “input”, the above code will uncheck if there are any other RadioButton control is present in any other column for a different purpose. To understand it better, include one more TemplateField with RadioButton control at the last in the GridView columns list and test it.

To handle the above scenario with multiple RadioButton in a Row, we will change the code a bit to access the RadioButton based on the column location. If we see the rendered table in the HTML output, we will have the RadioButton at every first TD. The below code will clear the selection of RadioButton that is found only in the first column.

  function CheckOtherIsCheckedByGVIDMore(spanChk)

       {

           var IsChecked = spanChk.checked;

           if(IsChecked)

              {

               spanChk.parentElement.parentElement.style.backgroundColor='#228b22'; 

               spanChk.parentElement.parentElement.style.color='white';

              }                   

           var CurrentRdbID = spanChk.id;   

           var Chk = spanChk;           

              Parent = document.getElementById('gvUsers');                        

              for(i=0;i< Parent.rows.length;i++)

              {

                  var tr = Parent.rows[i];

                  var td = tr.childNodes[0];             

                  var item =  td.firstChild;            

                  if(item.id != CurrentRdbID && item.type=="radio")

                  {           

                      if(item.checked)

                      {    

                          item.checked = false;

                          item.parentElement.parentElement.style.backgroundColor='white';

                          item.parentElement.parentElement.style.color='black';

                      }

                  }

              }

       }

The above code assumes the RadioButton will be the first column of every row in the GridView.

This code will work perfectly even if there are RadioButton present in any other column of the GridView control.